如何从不相关的组件传递道具

Question

我需要使用标题组件中的数据（2 个下拉菜单和一个应用按钮）绘制表格，而标题、表格部分和页脚彼此无关 我试图在单独的 Utils 文件中创建一个数组，该文件在点击应用按钮时填充，它被传递为

<Table data={utils.sortArray}/>

当在标题组件中点击应用按钮时，虽然数据正在填充 sortArray，但它仍然显示长度 0 当应用按钮被点击时，新的数组数据应该被传递给表格组件

Answer 1

如果您需要根据表头中的输入来更新表格，那么这些组件并不是真正无关的（它们通过它们共有/正在共享的数据相关联）。

要在两者之间进行通信，您需要一种传递数据的方法 - 合乎逻辑的方法是让父组件在两者之间进行协调，因为它可以根据上下文感知两者。在这种情况下，您可以：

1. 将回调传递给您使用所需数据调用的标头组件
2. 将回调中发送的数据存储在父状态中
3. 将状态数据传递给您的表。

例如，在您的父组件中：

state = {
  sortArray: '', // What ever your default value is
}

onSort = (sortArray) => {
  this.setState({
    sortArray,
  });
}

render() {
  ...
  <Header onSort={this.onSort} />
  ...
  <Table sortArray={this.state.sortArray} />
  ...
}

然后根据需要在标题中使用所需的值调用onSort。