Question

我还有新的反应，我想知道是否有可能做到以下几点。

我的状态仅用于在两个不同的子组件之间传输信息。第一个子节点是一个表（BootstrapTable）。单击该行时，将调用onClick函数。此函数将父状态设置为所有当前单击的行的数组。然后，此信息将传递给第二个子节点，这将允许我将行提交到后端服务器进行处理。目前，父母重新删除会删除表格中的复选标记。并且，因为我使用节点模块，我无法控制表行的行为（在使用我的自定义创建表之前，我能够在收到新道具后立即设置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之外被管理。当React可以拥有并管理影响其渲染事物的所有状态时，它会做得更好。

改变父母状态而不重新抚养父母，但重新抚养孩子

1 个答案: