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

Question

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

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

我想创建一个像这样的包装类：

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，它将在每次渲染时定义新组件。这意味着if将重新渲染每个渲染。