動的に作成された子コンポーネントが新しい小道具を受け取っていない

Question

私はReactの「ステートレスな子、ステートフルな親」のイデオロギーに従うようにしています。ここ

私の苦境を示して自分のコード（のCoffeeScript + JSX）の簡易版であるこの例では

@FormBlock = React.createClass 
    getInitialState: -> 
    fields: [], editMode: false 

    toggle: -> 
    @setState editMode: !@state.editMode 

    addChild: -> 
    child = `<EditableText key={Date.now()} text="FAILS" editMode={this.state.editMode}/>` 
    items = @state.fields.concat child 
    @setState fields: items 

    render: -> 
    `<div> 
     <a onClick={this.toggle}>Change Mode</a><br/> 
     <a onClick={this.addChild}>Add Child</a><br/> 
     <EditableText text="WORKS" editMode={this.state.editMode}/><br/> 
     {this.state.fields} 
    </div>` 


@EditableText = React.createClass 
    render: -> 
    if @props.editMode 
     `<input className="editable" defaultValue={this.props.text}/>` 
    else 
     `<span className="editable">{this.props.text}</span>` 

、成分<FormBlock>は最初fieldsそのeditMode=false全く含まないであろう。 Change Modeボタンをクリックしてをtrueに変更すると、<EditableText>コンポーネントの内容は<span>から<input>に変更され、ユーザーが変更できるようになります。

<FormBlock>のrenderメソッド（つまり<EditableText text="WORKS".../>）に含まれるダミーコンポーネントは完全に機能しますが、これは子供にとっては機能しません。私は作成時にタイプ<EditableText>のすべての子どもがその最初のpropsを受け取ることをテストしましたが、state.editModeが変更されたとき、すべての子どもは変更されません（私はcomponentWillReceivePropsが子どもに対して発射しないことを確認しました。 ）。

私はこの問題を解決しようとしています。助けてください！！！

Answer 1

問題は、EditableTextを呼び出した結果がコンポーネントの状態で保存されていることです。つまり、子供がまだされていない（答えを

@FormBlock = React.createClass 
 
    getInitialState: -> 
 
    fields: [], editMode: false 
 

 
    toggle: -> 
 
    @setState editMode: !@state.editMode 
 

 
    addChild: -> 
 
    items = @state.fields.concat {} 
 
    @setState fields: items 
 

 
    render: -> 
 
    `<div> 
 
     <a onClick={this.toggle}>Change Mode</a><br/> 
 
     <a onClick={this.addChild}>Add Child</a><br/> 
 
     <EditableText text="WORKS" editMode={this.state.editMode}/><br/> 
 
     { this.state.fields.map @renderChild } 
 
    </div>` 
 

 
    renderChild: -> 
 
     `<EditableText 
 
      key={Date.now()} 
 
      text="FAILS" 
 
      editMode={this.state.editMode}/>`

が