Question

我想通过id系统动态地将子组件添加到现有的React组件。为此，我有一个组件列表，在组件呈现之前，新组件与id一起存储。使用此列表，我可以通过id获取组件并调用它的addChild()函数。该组件随后被重新渲染。子组件可以是任何类型，而不仅仅是ComponentWithChilds，这只是一个例子。

components = {};

  var ComponentWithChilds = React.createClass({
    getInitialState : function(){
      components[this.props.id] = this;  //saves the component into the list
      return {children : []};
    },
    addChild : function(child){
      this.state.children.push(child);
      this.setState({
        children : this.state.children
      });
    },
    render : function(){
      return React.createElement("div",{},this.state.children);
    }
  });

  ReactDOM.render(
    React.createElement(ComponentWithChilds, {id:"id1"}),
    document.getElementById('app')
  );
  components["id1"].addChild(React.createElement(ComponentWithChilds, {id:"id2"}));  //adds a child to the element with id: "id1"

人们说这是一种反模式，我可以理解它们，因为这打破了React的一些原则。那么实现这种反应友好方式的最佳方法是什么？

Answer 1

我过去这样做的方法是拥有一个数据数组并将其传递给父组件的render方法。

使用ES6 / JSX可以让生活变得更轻松。

render() {
  return (
    <div>
      { this.childern.forEach(id => <ComponentWithChilds id={id}/> }
    </div>
  );
}

然后您的addChild方法变为：

addChild(child) {
  this.children.push(child);
}

动态地将子项添加到React组件

1 个答案: