如何在保持状态的同时复制组件

Question

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

问题是，如果我在其他地方重新渲染组件，即使我传递了相同的道具，它仍然必须运行异步操作，然后才能从与拖动源相同的状态渲染组件。

我想我可以通过这样做来实现它——引用拖动源的组件的渲染方法：

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

以及负责渲染拖动预览组件的另一种组件渲染方法：

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

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

考虑到这一切，我还有什么其他选择？是否可以在第一次渲染组件之前预先设置组件的状态？如果是这样的话，我可能能够使用相同的道具和克隆状态来渲染拖动预览组件，并使其看起来与拖动源元素完全相同。任何其他想法/建议，不胜感激！

Answer 1

您只需要与多个类似组件共享一个状态，而不需要将同级组件的状态复制到复制的状态。这里有两个选项：

1. 将DragSourceComponent的状态移动到其父组件，并通过props获取它们
2. 将DragSourceComponent的状态移动到上下文中，并通过React.useContext((钩子将它们获取到您想要的任何位置