React 包裝器組件未按預期工作

Question

我正在使用React-Dropzone並遵循網站上的第一個示例：

function MyDropzone() {
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      Hello
    </div>
  );
}

我想像這樣創建一個包裝器 class ：

function MyDropzone() {
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

  function Wrapper({ children }) {
    return (
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        {children}
      </div>
    );
  }

  return <Wrapper>Hello</Wrapper>;
}

但是當我這樣做時， react-dropzone 停止工作。 當我單擊該元素時，什么都沒有發生，而在第一個示例中它工作正常。 這不是包裝器組件的工作方式還是我遺漏了什么？

---

Answer 1

你可以這樣做。

function Wrapper({ children }) {
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      {children}
    </div>
  );
}

function MyDropzone() {
  return <Wrapper>Hello</Wrapper>;
}

這背后的原因是如果您在 MyDropzone 功能組件中定義 Wrapper，它會在您每次渲染時定義新組件。 這意味着如果將重新渲染每個渲染。