子どもをReactコンポーネントに動的に追加する

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" 

これは反パターンであり、私は理解することができます。これは、リアクトのいくつかの原則を破るためです。それで、これを反応に優しい方法で実現する最善の方法は何ですか？

Answer 1

私がこれまで行ってきたことは、データの配列を持ち、これを親コンポーネントのrenderメソッドに渡すことです。

ES6/JSXを使用すると、人生が楽になります。

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

あなたはaddChildメソッドは、次のようになります。

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