親を再レンダリングすることなく親状態を変更しますが、子を再レンダリングします

Question

私はまだかなり新しい反応を示しています。

私は、2つの異なる子コンポーネント間で情報を転送するために単独で使用される状態を持っています。最初の子はテーブル（BootstrapTable）です。行をクリックすると、onClick関数が呼び出されます。この関数は親ステートを、現在クリックされているすべての行の配列に設定します。そして、この情報は2番目の子に渡され、処理のためにバックエンドサーバーに行を送信することができます。現在、親の再レンダリングでは、テーブルのチェックマークが消去されます。そして、私はノードモジュールを使用しているので、カスタムテーブルを作成する前に、新しい小道具を受け取った直後にcheckBoxの状態を設定することができたので、手動でそれを何に戻すことができました以前はそうだった）。

私が見ることができる唯一の解決策は、再レンダリングせずに、変更された状態を子に渡すことです。これは可能なのですか？もしそうなら、代わりに何をすべきですか？

getInitialState : function() { 
    return (
     { 
      tableData : [], 
      selectedRows : [] 
     } 
    ); 
} 

onRowSelect : function() { 
    this.setState({selectedRows : this.refs.table.state.selectedRowKeys}, 
     function() { 
      console.log('selectedRows are ', this.state.selectedRows); 
     } 
    ); 
}, 
render : function() { 
    if (this.state.tableData.length === 0) { 
     return (<div>Loading...</div>); 
    } else { 
     return (
     <div className='full-table'> 
      <div className='react-table'> 
       <BootstrapTable 
        ref='table' 
        data={ this.state.tableData } 
        selectRow={ this.getSelectRowProps() } 
        options={ this.getOptions() } 
        insertRow 
        deleteRow 
        search 
        columnFilter 
        hover 
        pagination> 
        <TableHeaderColumn dataField='key' dataAlign='right' hidden={true} isKey={true}> 
         Key 
        </TableHeaderColumn> 
        <TableHeaderColumn dataField='in_progress_text' dataAlign='right'> 
         In-Progress 
        </TableHeaderColumn> 
        <TableHeaderColumn dataField='payment_id' dataAlign='right'> 
         Id 
        </TableHeaderColumn> 
        <TableHeaderColumn dataField='product_code' dataAlign='center'> 
         Type 
        </TableHeaderColumn> 
        <TableHeaderColumn dataField='status_description' dataAlign='center'> 
         State 
        </TableHeaderColumn> 
        <TableHeaderColumn dataField='payment_amount' dataAlign='center'> 
         Amount 
        </TableHeaderColumn> 
        <TableHeaderColumn dataField='payment_currency' dataAlign='center'> 
         Currency 
        </TableHeaderColumn> 
        <TableHeaderColumn dataField='process_state' dataAlign='center'> 
         Status 
        </TableHeaderColumn> 
        <TableHeaderColumn dataField='process_message' dataAlign='left'> 
         Message 
        </TableHeaderColumn> 
       </BootstrapTable> 
      </div> 
      <div className='submit-buttons'> 
        <SubmitButtonContainer selectedRows={this.state.selectedRows} /> 
      </div> 
     </div> 
    ); 
    } 
} 

Answer 1

レンダリングは冪等でなければなりません。つまり、何も影響を与えずに親を何度もレンダリングすることができます。これは、React内で管理されている状態とReact以外で管理されている状態の問題のようです。リアクションは、それがレンダリングするものに影響を与えるすべての状態を所有し、管理することができれば、より良くなります。