React-pdf: react ref={} 调用了 3 次，自定义回调不够有用

创建于 2018-01-23 · 4评论 · 资料来源: wojtekmaj/react-pdf

你好呀，

也许我误解了一些东西，但出于某种原因，当我像那样使用ref

<Document
  file={file}
  onLoadSuccess={this.onDocumentLoadSuccess}
  ref={node => console.log(node)}
>
....

我看到以下输出三遍：

screenshot 2018-01-23 17 13 23

好吧，我想使用ref来检测它在页面上呈现的位置（offsetTop、offsetLeft 等），除了使用ref之外没有其他方法可以获取它，所以我的问题是它可以调用三遍吗？

在我的真实示例中，我从客户端加载文件，但仍然有同样的问题:(

PS 代码取自您存储库的sample文件夹

enhancement question

资料来源

nnnikolay

所有4条评论

嘿@nnnikolay ，
是的，这完全是任何组件（请注意 - 组件，而不是元素）React 更新的正常行为。

此外，使用Document组件的 ref 检查页面是否已呈现是一个非常糟糕的主意。

我可以推荐的唯一方法是将onRenderSuccess prop 回调放置在Page组件中，您希望监听成功的渲染。

您也可以通过将inputRef属性附加到Page组件来实现，这会将您的ref函数传递给Page组件呈现的根 div 元素。但是，不建议使用此方法，因为从 3.0.0 开始， Page根 div 将比以前更早出现，以便在页面处于加载/渲染状态时更容易设置样式。

wojtekmaj 于 2018-01-24

感谢@wojtekmaj的回复和想法，首先，正如我看到的onRenderSuccess不接受任何参数，所以不清楚如何在这个回调中找到Page DOM 节点在页，我很高兴听到你的建议。

尽管如此， inputRef对我来说还是可以的，因为我只需要知道<div>在页面上呈现的位置（顶部和左侧坐标）。

nnnikolay 于 2018-01-24

啊，对。 onRenderSuccess 实际上应该提供有关它呈现的内容的更多信息。

目前，您可以采取一种解决方法（代码简化以提高可读性）：

const pageNumber = 1;

return (
  <Document>
    <Page
      pageNumber={pageNumber}
      onRenderSuccess={() => doSomething(pageNumber)}
    />
  </Document>
);

但我完全同意这一点。回调函数的改进在我的 3.0 列表中！ :)

wojtekmaj 于 2018-01-24

👍1

改进刚刚合并，将首先在传入的 v3.0.0-alpha.3 中可用。

wojtekmaj 于 2018-01-24

👍1

此页面是否有帮助？

0 / 5 - 0 等级

React-pdf: react ref={} 调用了 3 次，自定义回调不够有用

所有4条评论

相关问题