在 React 中传递 refs

Question

在我的App 组件中，我有两个组件Navbar 和View。在我的Navbar 组件中，我有一个ExportButton 组件，onClick 应该通过传递它的引用来生成View 组件的屏幕截图。

App.js

function App() {
  const view = useRef();
  return (
    <div className="App">
      <Navbar takeSnap={view}/>
      <View ref={view}/>
    </div>
  );
}

Navbar.js

const Navbar = ({ takeSnap }) => {
  return (
    <>
      <Lists />
      <ExportButton takeSnap={takeSnap} />
    </>
  );
};

Button.js

const ExportButton = ({ takeSnap }) => {
 function handleClick(takeSnap) {
    domtoimage.toBlob(takeSnap.current, {}).then(function (blob) {
      saveAs(blob, "myImage.png");
    });
  }
   return (
      <Button onClick={() => handleClick(takeSnap)} />
   );
};

我在传递View 的引用以使用库 dom-to-image 截屏时遇到了一些问题。错误说“未捕获（承诺中）TypeError：无法读取未定义的属性'cloneNode' 在 makeNodeCopy”。这可能是一个快速修复，但我不确定我哪里出错了。

Answer 1

您不能为组件创建ref，ref 只能引用 DOM 元素。 当你这样做时：

<View ref={view}/>

ref 是保留关键字，不会传递给您的视图渲染函数。

你可以使用forwardRef来解决这个问题，或者干脆使用不同的关键字，比如myRef：

<View myRef={view}/>

然后，当您渲染 View 时，您可以将此 ref 分配给您想要截屏的元素：

<div ref={myRef} ...