反応 - this.props.childrenを変更して、子コンポーネントを動的に（プログラムで）追加することができます

Question

fb docsによると、this.props.childrenは不透明なデータ構造であり、直接操作しないでください。実際に

、ドキュメントは、我々はライブラリ関数を見てみるとReact.Children

でライブラリ関数を使用する必要があることを言って、彼らは我々がthis.props.children

を変異されるべきではないと信じるように私をリードすべてのゲッター、ありますこれは本当ですか？ this.props.children（コンポーネントを動的に挿入するなど）を変更できますか？

ありがとうございます！

Answer 1

childrenを直接変更することはできません。ただし、マッピングを介してその出力を「変更」することができます：

const Hydrogen = props => (<div>{props.weight}</div>); 
const Oxygen = props => (<div>{props.weight}</div>); 

const Water = props => (
    <div className='water'> 
    {React.Children.map(props.children, child => (
     React.cloneElement(child, { 
      weight: props.weight/React.Children.count(props.children) 
     }) 
    ))} 
    </div> 
); 

const WaterBalloon = props => (
    <div className='water-balloon'> 
     <Water weight={3}> 
      <Hydrogen /> 
      <Hydrogen /> 
      <Oxygen /> 
     </Water> 
    </div> 
); 

ここでは、Waterに渡された子を「変更」してweightプロパティを渡します。

あなたは「追加/削除」する機能が必要な場合は、おそらくあなたは、「データ」の配列を維持し、そのデータからコンポーネントを取り込むように再設計を検討する必要があります。

https://jsfiddle.net/814jze3z/

const Item = props => (
    <li>{props.time}</li> 
); 

class List extends React.Component 
{ 
    constructor() { 
     super(); 
     this.state = { 
      items: [] 
     }; 

     this.addItem = this.addItem.bind(this); 
     this.removeItem = this.removeItem.bind(this); 
    } 

    addItem() { 
     let item = { 
      id: this.state.items.length + 1, 
      time: +new Date() 
     }; 

     this.setState({ 
      items: this.state.items.concat([item]) 
     }); 
    } 

    removeItem() { 
     this.setState({ 
      items: this.state.items.concat().splice(1) 
     }); 
    } 

    render() { 
     return (
      <div> 
       <button onClick={this.addItem}>Add Item</button> 
       <button onClick={this.removeItem}>Remove Item</button> 
       <ul className='list'> 
       {this.state.items.map(item => (
        <Item key={item.id} time={item.time} /> 
       ))} 
       </ul> 
      </div> 
     ); 
    } 
}