在不重新渲染父级的情况下更改父级状态，但重新渲染一个子级

Question

我对反应还很陌生，我想知道是否可以执行以下操作。

我有一个状态，它仅用于在两个不同的子组件之间传输信息。第一个孩子是一个表（BootstrapTable）。当我单击该行时，将调用一个 onClick 函数。此函数将父状态设置为所有当前单击的行的数组。然后，此信息将传递给第二个孩子，这将允许我将行提交到后端服务器进行处理。目前，父级重新渲染会删除表中的复选标记。而且，因为我使用的是节点模块，所以我无法控制表格行的行为方式（在使用自定义创建的表格之前，我能够在收到新道具后立即设置复选框状态，因此我可以手动将其更改回原来的状态曾经是）。

我能看到的唯一解决方案是将更改后的状态传递给孩子而不重新渲染。这是可能的还是我设计错了？如果是这样，它应该是什么？

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 之外管理某些状态的问题。当 React 可以拥有和管理影响其呈现的事物的所有状态时，它会做得更好。