Reactjs React：来自不同子组件的子组件中的触发器方法

我在React中创建了两个组件，

和

，这两个组件都是

的子组件使用
refs
来实现类似的功能，但实际上我有点犹豫，因为根据React文档，refs

看起来有点脏，因为它们“强制修改典型数据流之外的子级”

单击

中的按钮后，如何指示我的

组件执行某些操作

---

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

一个自然的选择是在

中创建一个状态布尔变量，当按下

中的按钮时触发，然后在

中使用一些逻辑在布尔状态从

false

变为

tr时获取数据ue

例如：

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>
    )
  } 
}

---

虽然这会起作用，但使用

作为数据源也不错。通过这种方式，您可以抽象出只处理UI而没有网络逻辑的纯组件。这通常是一个很好的模型，有助于您在将来重用组件。

这将是一个使用存储的好时机，它将保持应用程序的整个状态作为一个整体single JS object.Flux和Redux是两种优秀的架构，它们对React起到了补充作用。基本上，您的组件会监听存储中的更改，当执行任何操作（进行api调用/单击等）时，存储会得到更新，ui也会发生更改。一个大型React应用程序可能会变得非常混乱，无法处理很多孩子

---

同样，完全同意上面的答案，让

组件成为无状态的，并且只基于道具进行渲染。因此，让函数在父级

中编写并传递数据是一个好主意。

您使用的是Redux吗？如果是，您可以从

@OmriAharon发送一个操作。不幸的是，不是，很简单现在作出反应。既然组件接收信息的唯一方式（以“反应方式”）是状态/道具，您几乎涵盖了这两个选项。我将使用您要使用的第一个选项。顺便说一句-

似乎是调用此API（或至少触发它）的完美地方，并且

应该非常乐意只接收和显示数据。第三个选项可能是获取

组件，然后使用您收到的数据调用

中的函数，然后将其传递给

，因此基本上

处理调用，而不是

。

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
}