Question

我在React JS中是新的。几周前我在JS，jQuery创建了待办事项列表应用程序，现在我将使用React重建它，只是为了改变我的观点并练习React。

我在不同的文件和一个父组件中有很少的组件（兄弟姐妹） - App，组件：

应用： - 导航 - 任务列表 - 添加任务 - 页脚

我的导航组件如何与任务列表组件通信？ 更具体地说，我想要像全局变量 selectedDay这样的东西，并在所有组件中使用它。当用户在单日导航组件中选择时，例如星期日，我想保存＆＃34;星期日＆＃34;在此变量中，稍后在任务列表中使用它（这当然是数据的示例）。我的问题是如何在第一个组件中存储数据并在另一个组件中使用？

我是否应该将状态用于此类目的？我在考虑在父（App）组件中设置初始状态 - ＆gt; selectedDay：＆＃34;星期一＆＃34; / default /以后通过Navigation组件更新它并在Task List组件中使用。请问你能帮帮我吗？我将感激不尽！

Answer 1

你需要的是redux。它为您提供了一个全局状态树，它是一个对象，一种操作它的方式，最重要的是，当您的状态树更改时，它会重新呈现组件。这样您的组件始终与最新的状态树保持同步。

Answer 2

有两种解决方案。

1-使用处理全局状态的库，如Redux（如FurkanO所说）。这样，您的“大组件”（也称为容器）将连接到应用程序的全局状态，并使用操作进行更新。动作是某种类型的事件，有时是有效负载，它们会被减速器拦截并触发状态更新。

2-使用要查看交互的组件的最低公共父级的状态。

2-的基本示例：父组件包含导航＆amp;任务列表。

class Parent extends Component {
  state = {
    selectedDay: defaultDay,
  }

  setDay = (selectedDay) => {
    this.setState({ selectedDay });
  }

  render () {
    const { selectedDay } = this.state;
    return (
      <div>
        <Navigation setDay={this.setDay} />
        <TaskList selectedDay={selectedDay} />
      </div>
    );
  }
}

然后，您只需在导航组件中使用此setDay函数来设置父组件中的状态。这样，您的TaskList将通过其props获得新值。这种方法有其局限性（在我看来，它确实不能很好地扩展）。

希望有所帮助。如果您不清楚，请告诉我。

React - 组件之间的通信（适合初学者）

2 个答案: