Javascript 如何保存组件'；将其移动到react中的另一个父组件时？

假设我们有两个兄弟react组件，分别称为

OldContainer

和

NewContainer

。

OldContainer

中有一个子组件，它包含一个

标记，当前正在播放视频

用户现在可以拖动子组件（与视频一起）并将其放入

NewContainer

，他们希望视频在拖动期间和拖放之后都能继续播放

因此，视频看起来是粘在鼠标位置上的，当拖放到新容器中时，它会动画化到新位置（同样，它不会暂停）

您将如何实现这一点？我们能否以纯粹的方式实现这一点（符合纯粹功能的精神）

澄清：我本可以用其他元素而不是视频标签来解释这个问题。元素是一个更好的例子，因为它需要在交互期间和交互之后保留组件的道具和状态

---

更新1：代码示例显然很好，但我主要寻找的只是关于如何以“功能”方式处理此问题的一般描述。如何使视图代码简单易懂？谁来处理拖放动作？如何对输入视图的数据进行建模？

您希望保留的是什么？组件作为状态保存的是Javascript对象，还是DOM中的状态（比如视频播放了多长时间，或者输入框中的文本选择）

如果只是Javascript对象作为状态，那么最好将该状态的源移动到另一个服务（比如Flux）。这样，组件是否被重新创建就无关紧要了，因为它可以使用之前的状态重新创建

编辑

保持视图代码简单且易于推理的方法是不在组件中保持状态。相反，组件需要的所有数据都应该作为道具传递到组件中。这样，组件是“纯”的，因为它在给定相同道具的情况下呈现相同的输出。这也使得想要重用组件实例的问题成为一个不存在的问题，因为当相同的输入给出相同的输出时，这并不重要

对于拖放，我建议查看：

如何对传递给视图组件的数据建模取决于您和应用程序的需要。组件不应该在意，它们应该只期望获得作为道具传递的数据，并呈现它们。但是处理这个问题的流行方法当然是Flux，有许多库以不同的方式实现Flux

第二次编辑

关于是否有一个包含数百个要移动的组件的子树：我仍然会首先将状态设置为外部（纯组件），然后在新位置渲染该树。这意味着React可能会重新创建整个子树，这很好。我不会偏离这条道路，除非它的性能被证明是可怕的（仅仅猜测它可能是可怕的是不够的）

如果性能非常糟糕，我会将整个子树包装在一个组件中，该组件缓存实际的DOM树并重用它（如果它通过相同的道具）。但你应该只在绝对需要的时候才这样做，因为这与React试图为你做的事情背道而驰

第三次编辑

关于手势：我首先在

componentDidMount

中收听手势事件，然后在事件回调调用

setState

中收听组件的坐标。然后使用给定的坐标在

render

中渲染组件。当您调用

setState

时，React不会重新创建组件，但它会重新渲染组件（并区分输出）。如果只更改了坐标，则渲染速度应该足够快

---

如果结果证明速度太慢，比如如果组件的子树太大，并且重新创建vDOM的子树成为瓶颈，我会在Reacts控制之外的RAF循环中直接重新定位DOM节点。我还对为什么需要这样做做做了大量的评论，因为这对以后的其他开发人员来说可能会很奇怪。

使用

const

或

var

创建一个新变量。使用rest spread操作符放置数据实例，更新必要的数据以传递并将数据发送到组件，而不改变组件的状态

就像：

const data = {
...this.state.child,
new_data : 'abc'
}    

---

查看此库：

假设我们有一个包装组件，您可以始终定义一个已安装组件的ref=“OldContainer”（STRING！！），该组件可以通过包装组件的.refs[“OldContainer”]访问。我想，将此信息传递到另一个组件的道具中会使用此引用？实际上，容器不需要相互了解。所以

是不相关的。为什么他们应该相互了解？访问底层DOM元素只是解决方案的一部分。尽管我正在寻找一种解决方案，它不需要组件直接访问和操作它们的底层DOM元素，或者至少提供一个抽象层。但不要刻意克隆元素，因为您不需要2个表示。我不建议克隆元素，我只建议在

render

方法中使用条件，并在不同的位置渲染组件。这将使React丢弃并重新创建组件。只要组件本身不拥有状态，这是一个更好的方法。我写了一个更新：我主要寻找的只是一个关于如何以“功能”方式处理这个问题的一般描述。如何使视图代码简单易懂