Javascript React包装器组件未按预期工作

我正在使用并遵循网站上的第一个示例：

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

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

函数MyDropzone（）{
const{getRootProps，getInputProps，isDragActive}=useDropzone（{onDrop}）；
返回(
你好
);
}

我想创建一个如下所示的包装器类：

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

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

  return <Wrapper>Hello</Wrapper>;
}

函数MyDropzone（）{
const{getRootProps，getInputProps，isDragActive}=useDropzone（{onDrop}）；
函数包装器（{children}）{
返回(
{儿童}
);
}
回复你好；
}

但当我这样做时，dropzone停止工作。当我单击元素时，什么也没有发生，而在第一个示例中，它工作正常。包装器组件就是这样工作的，还是我遗漏了什么

---

你可以这样做

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

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

函数包装器（{children}）{
const{getRootProps，getInputProps，isDragActive}=useDropzone（{onDrop}）；
返回(
{儿童}
);
}
函数MyDropzone（）{
回复你好；
}

---

这背后的原因是，如果在MyDropzone功能组件中定义包装器，它将在每次渲染时定义新组件。这意味着if将重新渲染每个渲染。

。这应该是我的一个问题，我想在包装器组件和MyDropzone组件中使用useDropzone挂钩。在这两种情况下初始化都会使其停止工作。有没有关于如何克服这一问题的建议？