javascript - 如何在组件之间传递状态？

Question

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

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

Answer 1

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

<MainBlock
  left={
    <List allTasks={this.state.allTasks} />
  }
  right={ 
    <Form onSubmit={allTasks => this.setState({ allTasks })} />
  }
/>