React：来自不同子组件的子组件中的触发方法答案

【问题标题】：React: Trigger method in child component from different child componentReact：来自不同子组件的子组件中的触发方法
【发布时间】：2017-05-20 13:09:36
【问题描述】：

我在 React 中创建了两个组件，<Search /> 和 <List />，它们都是 <App /> 的子级。

当单击<Search /> 中的按钮时，我想从 API 中获取某些内容并在<List /> 中显示结果。虽然我通过在 <App /> 中进行 fetch 并将响应作为 prop 传递给 <List /> 来完成这项工作，但我更愿意将 fetch 封装在 <List /> 中。

不幸的是，我很难找到一种方法来做到这一点。 “React 方式”可能是通过一些巧妙的道具传递来做到这一点，但我还没有找到一种巧妙的方式来做到这一点——即使是“shouldFetch”布尔值也需要在 fetch 之后重置，这看起来很麻烦并且会触发不必要的渲染。

This answer 将 refs 用于类似的东西，这可能会起作用，但实际上我有点犹豫要不要尝试它，因为根据 React 文档，refs 似乎有点脏，因为他们“必须修改典型数据流之外的子节点”。

在单击<Search /> 中的按钮后，如何指示我的<List /> 组件执行某些操作？

如果需要，我可以提供代码——但希望这个问题比我想象的要简单。

【问题讨论】：

你在使用 Redux 吗？如果是这样，您可以从 <Search /> 发送一个操作
@OmriAharon 不幸的是，现在不是，简单的 React。
那么由于组件接收信息的唯一方式（在“React 方式”中）是状态/道具，你几乎涵盖了这两个选项。我会使用你必须工作的第一个选项。顺便说一句 - <Search /> 似乎是调用此 API（或至少触发它）的绝佳场所，<List /> 应该对接收和显示数据感到非常满意。
第三种选择可能是获取<Search /> 组件，然后使用您收到的数据调用<App /> 中的函数，然后将其传递给<List />，所以基本上<Search /> 代替 <App /> 处理呼叫。

标签： reactjs

【解决方案1】：

一个自然的选择是在<App /> 中创建一个状态布尔变量，当在<Search /> 中按下按钮时触发，然后在布尔状态从false 变为时使用<List /> 中的一些逻辑来获取数据到true。

例如：

class App extends React.Component {
  constructor() {
    super();
    this.state = { fetchData: false }
  }

  render() {
    return (
      <div>
        <Search onClick={() => this.setState({fetchData: true})} />
        <List shouldFetch={this.state.fetchData} onFetch={() => this.setState({fetchData: false})} />
      </div>
    )
  } 
}

然后在你的<List /> 组件中：

class List extends React.Component {
  componentWillReceiveProps(nextProps) {
    if ( !this.props.shouldFetch && nextProps.shouldFetch ) {
      // Fetch data here and set it in state, for example
      // After fetch, don't forget to call onFetch() to reset the boolean
    }
  }

  ... // more code
}

虽然这样可行，但使用<App /> 作为数据源也不错。这样你就可以抽象出只处理 UI 而没有网络逻辑的纯组件。这通常是一个很好的模型，可以帮助您在未来重用组件。

【讨论】：

【解决方案2】：

这将是使用商店的好时机，它将把你的应用程序的整个状态保存为单个 JS 对象。 Flux、Redux 是 React 的 2 个优秀架构。基本上，当执行任何操作（进行 api 调用/单击等）时，您的组件会监听 store 中的更改，store 会更新并且 ui 会更改。大型 React 应用程序在处理很多孩子时会变得非常混乱。

也完全同意上面的回答，让<List />组件无状态，只根据props渲染。因此，将函数写入父级<App/> 并传递数据是一个好主意。

【讨论】：