Reactjs 更改父级状态而不重新渲染父级,但重新渲染子级
我还没有做出反应,我想知道是否有可能做到以下几点 我的状态仅用于在两个不同的子组件之间传输信息。第一个子项是表(BootstrapTable)。单击该行时,将调用onClick函数。此函数用于将父状态设置为当前单击的所有行的数组。然后,该信息将传递给第二个子级,这将允许我将行提交到后端服务器进行处理。当前,父重渲染器将删除表中的复选标记。而且,由于我使用的是节点模块,我无法控制表行的行为(在使用自定义创建的表之前,我能够在收到新道具后立即设置复选框状态,以便手动将其更改回原来的状态) 我能看到的唯一解决方案是将更改后的状态传递给子级,而无需重新排序。这是可能的还是我设计错了?如果是的话,应该是什么Reactjs 更改父级状态而不重新渲染父级,但重新渲染子级,reactjs,Reactjs,我还没有做出反应,我想知道是否有可能做到以下几点 我的状态仅用于在两个不同的子组件之间传输信息。第一个子项是表(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>
);
}
}
getInitialState:函数(){
返回(
{
tableData:[],
selectedRows:[]
}
);
}
onRowSelect:函数(){
this.setState({selectedRows:this.refs.table.state.selectedRowKeys},
函数(){
console.log('selectedRows are',this.state.selectedRows);
}
);
},
渲染:函数(){
if(this.state.tableData.length==0){
返回(加载…);
}否则{
返回(
钥匙
进行中
身份证件
类型
陈述
数量
通货
地位
消息
);
}
}
呈现应该是幂等的;ie您应该能够在不影响任何内容的情况下重新渲染父对象(甚至多次)。有些状态在React内部管理,有些状态在React外部管理,这听起来像是个问题。如果React能够拥有和管理影响其渲染内容的所有状态,它会做得更好。渲染应该是幂等的;ie您应该能够在不影响任何内容的情况下重新渲染父对象(甚至多次)。有些状态在React内部管理,有些状态在React外部管理,这听起来像是个问题。如果React能够拥有和管理影响其呈现内容的所有状态,它会做得更好。添加一些代码示例。已经添加了代码示例。如果您可以访问某种flux实现,则可以使用它们在组件之间进行通信。添加一些代码示例。已经添加了代码示例。如果您可以访问某种通量实现,然后您可以使用它们在组件之间进行通信。当您说“某个状态在React内部管理,而某个状态在React外部管理”时,您能详细说明一下您的意思吗?我使用的是一个名为React bootstrap table的表。你是说节点模块没有正确地管理子状态吗?哦,好的,那么你是在用React做所有事情。我想你可能在尝试与第三方非反应库接口。在这两种情况下,我的第一句话都是,渲染不应该改变状态。我不确定您是否在这里实际使用onRowSelect函数,但您是否是父对象,正在进入子对象的状态,这不是您在React中应该做的事情。React使用“单向数据流”,其中数据始终从父级流到子级。这种状态很可能只存在于父组件中,并通过道具传递给子组件。要扩展这种状态,组件永远不应该直接知道另一个组件的状态。相反,组件将通过道具共享其状态的相关部分,仅对儿童共享。如果一个孩子需要改变这种状态,那么家长将提供一个函数,再次使用道具来改变这种状态。该函数存在于父级中,因此父级是唯一可以实际更改状态的位置,但该函数可以通过道具传递给子级,这允许子级修改父级中的状态。我进入子级状态的原因是提取已单击的行的复选框。根据react引导表API,这似乎是正确的方法。除此之外,我不知道如何访问行是否已被签出的信息。当您说“某个状态在React内部管理,而某个状态在React外部管理”时,您能详细说明一下您的意思吗?我使用的是一个名为React bootstrap table的表。你是说节点模块没有正确地管理子状态吗?哦,好的,那么你是在用React做所有事情。我想你可能在尝试与第三方非反应库接口。在这两种情况下,我的第一句话都是,渲染不应该改变状态。我不确定您是否在这里实际使用onRowSelect函数,但您是否是父对象,正在进入子对象的状态,这不是您在React中应该做的事情。React使用“单向数据流”,其中数据始终从父级流到子级。这种状态很可能只存在于父组件中,并通过道具传递给子组件。要扩展这种状态,组件永远不应该直接知道另一个组件的sta