已经渲染的组件如何 挂载到别的dom？

#1

因为项目需要，花了几天快速入门react，但是中间经常碰壁，这次因为产品需求，但是我个人感觉这个需求好像有点违背react本身的设计理念。但是现在项目做到一半，问题还是要解决的，所以来求助各位大大。

需求： 一个有状态的组件，在已经渲染挂载到某个DOM的情况下。如何保留它当前的所有属性和状态 再挂载到另一个DOM节点？

#2

另一个地方挂在新的组件实例的时候是不能把其他地方的状态带进去的. 这个思维方式有点问题. 如果你希望两个组件的状态是一致的话, 应该把状态放到外面来, 然后传给新的那个组件实例.

这个在 React 里思路不一样. React 里你要把 MVC 的 Model 跟 View 想清楚. Model 是 Model, 状态一般是在 Model 上的. 要两个地方状态一致, 一般就是两个地方共用一个状态.

#3

并不是创建并挂载新的组件。而是把已经挂载到DOM的组件挂载到其他DOM节点。

刚刚已经试了，通过refs获取到实例后通过 react-dom的findDOMNode获取到真实DOM节点。然后添加到其他DOM节点，这个组件本身的状态还是保留的。而且react也会因为这个添加操作，把这个组件从原本的DOM节点移除。

因为产品急着上线，在我个人没有参与调研技术的情况下，项目组长就选择用开源的DEMO去做，后来产品功能迭代过程中就发现 不知道是因为自己对react的理解不够还是跟react设计理念不符合，总感觉很不顺手。因为项目太赶了。我只看了三天的入门教程就动手做项目了:sweat:

#4

思路上转变一下吧, React 是几乎没有直接把挂载的 DOM 用代码复制了挂载到另一个地方的. 用用同一个组件就直接在 JSX 写那个组件, 会自动渲染上去.

很多函数式编程的套路, 跟以往面向过程跟面向对象是挺不一样的.

#5

同一个组件，这里的意思是 同一个组件实例吗？我一开始就是通过ref获取实例写到 render函数上面，但是它报错了，说不是react child，意思是通过ref拿到的不是react元素？ ，请问能给个简单的例子吗？

#6

听你说的怪怪的, 反正没怎么听到过这样用的…

比如组件 A, 我的意思是通过 props 传递相同的数据来控制两者的数据一致:

class X extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      data: {x: "y"}
    }
  }

  render() {

    return (
      <div>
        <A data={this.state.data}>
        <A data={this.state.data}>
      </div>
    )
  }
}
#7

嗯，谢谢。确实应该把子组件的 状态提升到父组件来统一管理的。只是一开始没有考虑好，导致产品迭代需求的时候，走错了路:sob: