如何在react-pdf-viewer中实现自定义按钮并保留点击与提示功能

问题根因 #

你自定义按钮失效的核心原因是Download等react-pdf-viewer内置的插槽组件，会通过子渲染函数传递内置的点击事件、Tooltip配置等属性，你当前的写法忽略了这部分参数，没有把属性绑定到自定义按钮上，所以触发不了对应功能，也没有hover提示。

解决方案 #

步骤1：修改Download插槽的调用逻辑，接收内置属性并透传给自定义按钮

找到App组件中Download标签的部分，修改为如下代码：

<Download>
    {/* 接收Download组件传递的所有内置属性（包含onClick、tooltip配置等） */}
    {(props) => (
        <DownloadButton {...props} />
    )}
</Download>

步骤2：修改DownloadButton组件，接收透传属性并绑定到按钮元素

修改你的自定义按钮代码：

export const DownloadButton = (props) => (
    // 将所有透传属性绑定到原生button上，自动继承点击事件、tooltip等能力
    <button {...props} className="downloadButton" aria-label="Download">
      <img src={process.env.PUBLIC_URL + '/icons/download.svg'} className="btButton" alt="Download" />
    </button>
);

其他按钮复用方案 #

打印、缩放等其他需要自定义的按钮都可以用相同逻辑处理：接收对应插槽组件传递的render props参数，全部透传给你的自定义按钮元素即可。

内容的提问来源于stack exchange，提问作者Dorian Fabre