Question

我是React JS的新手，我想创建一个ToDo列表应用。我有App.js这是主页面，因此我为MainBlock页面创建了App.js组件，其中包含我的布局的左侧和右侧，在右侧属性中加载Form包含input和button的组件，并将输入值保存到state中的数组中，并在左侧加载List组件，该组件具有名为allTasks的属性它打印所有任务。我的问题是如何将allTasks状态从表单组件转移到App.js以将其传递给List组件属性？在App.js中：

<MainBlock
left={  
    <List allTasks={['خرید از فروشگاه', 'تعویض دستگیره درب منزل']} />} 
right={
    <Form />
} />

Answer 1

您可以通过将任务作为状态存储在App组件中来完成此操作，并让Form通过回调道具传递状态。这个概念被称为“提升状态”。以下是有关它的指南：https://reactjs.org/docs/lifting-state-up.html

src/index.re

Answer 2

让任务成为MainBlock组件的状态。将此状态传递给List组件。
让Form组件公开一个回调属性（可能是np.concatenate((data1, data2, data3, data4), axis=2)），当用户完成创建新任务时会调用该属性。
让MainBlock拦截onTaskCreated回调并使用新任务更新它的内部状态，这会导致它重新渲染，从而将新任务列表传递给List组件。
< / LI>

Answer 3

你正试图在这里实现双向绑定。不幸的是，React是一个默认情况下不支持双向绑定的库。您只能将值从Parent传递给Child到Sub-Child。然而，反之则不然。在这种情况下，您尝试从Form加载到App的道具，这是从Child到Parent，这是不可能的。

您应该使用Redux等状态容器，通过使一个组件的状态可用于另一个组件来克服此限制。

Answer 4

您可以将所有任务存储在MainBlock组件的状态中，并传递函数以通过表单更新状态。此外，将MainBlock的状态（任务）传递给List组件。将任务更新到MainBlock会自动将任务传递给List。稍后您可以使用MobX和Redux等状态管理库。

Answer 5

组件之间传递数据可能令人困惑。像redux这样的库是为了让它“更容易”而创建的，但它可以通过简单的React来完成。要将状态信息传递给子项，请将其传递给它们的道具。要向另一个方向发送数据，您将从子项传递到子项，从子项调用处理函数，并根据需要影响父项的状态（或传递给它的父项）。

我写了一支sample笔来帮助人们围绕这个问题。希望它有所帮助。

类似的东西：

<Child1 handleAdd={this.handleAdd.bind(this)} 
    handleSubtract={this.handleSubtract.bind(this)} 
/>

在父级中进行调用，并在子级中进行访问：

<Button onClick={this.onAdd.bind(this)}>
    add
</Button>&nbsp;
<Button onClick={this.props.handleSubtract.bind(this)}>
    subtract
</Button>

然后父母中有一个名为 handleAdd 的函数可以影响父状态。

如何在组件之间传输状态？

5 个答案: