javascript - 如何在保留状态的同时复制组件？

Question

我有一个组件 state由于某些异步操作而更新。此组件是某些拖放 UI 的一部分，当用户开始拖动操作时，我需要在负责显示拖动元素的应用程序的单独部分中呈现此组件。

问题是，如果我在别处重新渲染一个组件，即使我传递了相同的 props，它仍然必须运行异步操作才能从与拖动源相同的状态渲染组件。

我想我可以通过做这样的事情来让它工作 - 引用拖动源的组件的渲染方法:

render() {
    return (
        <DragSourceComponent ref={this.dragSourceComponentRef} />
    )
}

还有一个不同的组件渲染方法负责渲染拖拽预览组件:

renderDragPreview(dragSourceComponentRef) {
    return React.cloneElement(dragSourceComponentRef.current)
}

但是这不起作用，因为 dragSourceComponentRef.current不被认为是有效的 React 元素，即使是，我也不认为 React.cloneElement复制组件的状态(文档对此不清楚)。

考虑到所有这些，我还有哪些其他选择？
是否可以说，在第一次渲染之前预先设置组件的状态？如果是这种情况，我可能能够使用相同的 Prop 和克隆状态渲染拖​​动预览组件，并使其看起来与拖动源元素完全相同。任何其他想法/建议表示赞赏!

Answer 1

您只需要与多个相似的组件共享一个状态，而不是将兄弟组件的状态复制到复制的组件中。
您在这里有两个选择:

将 DragSourceComponent 的状态移动到其父组件并通过 props 获取它们；

将 DragSourceComponent 的状态移动到上下文中，并通过 React.useContext() 钩子(Hook)在您想要的任何位置获取它们