Question

Hiello！

我想知道React示例中的错误是什么，或者React的工作方式与我想的不同？

当父母是两个不同的组件时，我正在寻找一种方法来重用子反应组件的底层html元素。

在下面的示例中，我希望Circle组件内部在调用renderC1和renderC2之后具有相同的元素。例如，我可以应用转换css属性来设置颜色开关的动画，就像我可以使用它一样。只是直接在元素上改变了样式。

当我渲染波纹管时，React似乎总是在DIV上生成不同的HTML元素，ref，key或id（在Circle的渲染函数中）并没有多大帮助。

所以我的问题：是否有可能让React重新使用在呈现C2时通过C1渲染的DIV？我认为这就是React应该如何工作，优化底层HTML元素？

类似的东西：

var C1 = React.createClass({
  render: function () {
    return (
        <Circle background="deeppink" onClick={renderC2}/>
     );
  }
});

function renderC1 () {
  React.render(
    <C1 />, 
    document.getElementById('mount-point'));
}

var C2 = React.createClass({
  render: function () {
    return (
        <Circle background="salmon" onClick={renderC1}/>
     );
  }
});

function renderC2 () {
      React.render(
    <C2 />, 
    document.getElementById('mount-point'));
}

var Circle = React.createClass({
  styler: {
    width: "100px",
    height: "100px",
    mozBorderRadius: "50%",
    webkitBorderRadius: "50%",
    borderRadius: "50%",
    background: 'hotpink'
  },

  componentWillMount: function() {
    if (this.props && this.props.background &&
       this.props.background !== this.styler.background) {
         this.styler.background = this.props.background;
    }
  },

  render: function() {
    return (
      {/* tried adding key, ref and id, but does not reuse element */}
      <div onClick={this.props.onClick} style={this.styler}></div>
    );
  }
});

renderC1();

Answer 1

这是不可能的。 DOM不允许一个元素同时位于两个位置。尝试将DOM元素放在新位置会自动将其从旧位置删除。

你可以在这里看到。（或者更直观地，here）

var parent1 = document.createElement('div'),
    parent2 = document.createElement('div'),
    child = document.createElement('div'),
    results = document.createElement('span');

  document.body.appendChild(results);
        
  parent1.appendChild(child);
  results.textContent += child.parentNode === parent1; //true
  parent2.appendChild(child);
  results.textContent += ', ' + (child.parentNode === parent1); //false

为什么不反应子组件的缓存html元素？

1 个答案: