Question

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

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

我认为我可以通过执行以下操作使其工作：-引用拖动源的组件的render方法：

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

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

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

但是这不起作用，因为dragSourceComponentRef.current被认为不是有效的React元素，即使它是有效的，我也不认为React.cloneElement复制了组件的状态（文档尚不清楚这个）。

请记住所有这些，我还有什么其他选择？可以说在第一次渲染组件之前预先设置其状态吗？如果是这种情况，我也许可以使用相同的道具和克隆状态来渲染拖动预览组件，并使它看起来与拖动源元素完全相同。任何其他想法/建议表示赞赏！

Answer 1

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