Передача ссылок в React - PullRequest
Новая
       4

Передача ссылок в React

1 голос
/ 06 мая 2020

В моем компоненте App у меня есть 2 компонента Navbar и View. В моем компоненте Navbar у меня есть компонент ExportButton, который onClick должен создать снимок экрана компонента View, передав его ссылку

App. js

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

Панель навигации. js

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

Кнопка. 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 для undefined в makeNodeCopy». Это может быть быстрое исправление, но я не уверен, что ошибаюсь.

1 Ответ

1 голос
/ 06 мая 2020

Вы не можете создать ref для компонента, ref может ссылаться только на элемент DOM. Когда вы это сделаете: 

<View ref={view}/>

ref - это зарезервированное ключевое слово, и оно не будет передано вашей функции рендеринга View.

Вы можете использовать forwardRef для решения этой проблемы или просто используйте другое ключевое слово, например myRef: 

<View myRef={view}/>

Затем, когда вы визуализируете свой View, вы можете назначить этот ref элементу, из которого хотите сделать снимок экрана: 

<div ref={myRef} ...
...