如何在保留状态的同时复制组件？答案

【问题标题】：How do I duplicate a component while preserving state?如何在保留状态的同时复制组件？
【发布时间】：2018-11-08 12:27:04
【问题描述】：

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

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

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

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

以及负责渲染拖拽预览组件的不同组件渲染方法：

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

但这不起作用，因为dragSourceComponentRef.current 不被视为有效的 React 元素，即使它是，我也不认为 React.cloneElement 复制组件的状态（文档对此并不明确）。

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

【问题讨论】：

【解决方案1】：

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

【讨论】：