Javascript 在比赛中通过裁判

在我的

App

组件中，我有两个组件

Navbar

和

View

。在我的

Navbar

组件中，我有一个

ExportButton

组件，单击该组件可以通过传递其ref来生成

视图的屏幕截图

App.js

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

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

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

函数应用程序（）{
const view=useRef（）；
返回(
);
}

Navbar.js

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

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

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

const-Navbar=（{takeSnap}）=>{
返回(
);
};

Button.js

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

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

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

const ExportButton=（{takeSnap}）=>{
功能手柄点击（takeSnap）{
toBlob（takeSnap.current，{}）.then（函数（blob）{
saveAs（blob，“myImage.png”）；
});
}
返回(
handleClick（takeSnap）}/>
);
};

我在传递
View
的ref时遇到了一些问题，无法使用库dom-to-image拍摄屏幕截图。错误为“未捕获（承诺中）TypeError:无法读取未定义的属性'cloneNode'
在makeNodeCopy”。这可能是一个快速的解决方案，但我不确定哪里出了问题。
您无法为组件创建
ref
，而
ref
只能引用DOM元素。
当您这样做时：

<View ref={view}/>

然后，在渲染
视图时，可以将此引用指定给要从中获取屏幕截图的元素：

<div ref={myRef} ...

查看是否正在进行任何ref转发？我假设
domtoimage
需要一个DOM元素，而不是组件引用。看，我仍然得到同样的错误。您能详细说明一下吗？在应用程序中，您在查看之前呈现导航栏，因此导航栏无法访问视图的参考。我认为你们应该把一个回调传递给Navbar，让Navbar调用App，然后在App中你们可以拍摄快照