反应，父母在处理完成时通知孩子答案

【问题标题】：React, Parent notifies child when handle complete反应，父母在处理完成时通知孩子
【发布时间】：2019-09-20 20:36:37
【问题描述】：

感谢您的帮助。

我有一个父子组件设置，其中父级的状态作为道具传递给子级，其中一个道具是 onClick 事件处理程序，其按钮位于子级中但在父级中处理。当按下 onclick 时，它将在父级中引发该句柄事件，父级将调用 api 以获取一些数据。完成后，需要通知孩子。

我的问题是：其他除了包含另一个父母会设置的道具 - 这会让孩子知道父母是完整的，我有什么选择？（注意：我没有使用 Redux 并且希望不使用）。

Promises 可以在这里工作（见下面的代码）或者是 props 推荐的实现。（我对道具的担心是我已经将 6 岁左右传给了孩子，我不想继续添加更多，尤其是对于这样的东西）

家长：

private handleOnclick = () => {
        this.apiService.getData() ...
 }

<Child onClick={this.handleOnclick} ...

孩子：

Child 有一个调用父级的内部 handleButtonOnclick 函数。

   private handleButtonOnclick = () => {
         this.props.handleOnclick().then( () => {
         **WHEN COMPLETE TAKE SOME ACTION.**
    });
   }
   <Button onClick={() => this.handleOnclick()} >Click Me</Button>

如您所见，我试图弄清楚在父级完成处理后如何通知客户端（不使用道具或一些状态管理库）

谢谢！

【问题讨论】：

也许如果你添加一个更具体的例子，我可以给你一个更详细的建议，但看起来你在正确的轨道上，那就是 react 应该如何工作。您正在父母中做生意，只将数据/通知传递给您的孩子。如果你有更多的子组件并且你想防止 prop-drilling 你可以使用上下文，但我认为情况并非如此。

标签： reactjs

【解决方案1】：

ComponentDidUpdate 会让你看到一个道具是否改变了：

家长：

constructor(props) {
  super(props);
  this.state = {
    gotData: false;
  }
}

handleOnClick {
  this.setState({ gotData: false });
  this.apiService.getData(() => {
    // ...
    this.setState({ gotData: true });
  }
}

// render()
<Child onClick={handleOnClick} gotData={this.state.gotData} />

孩子：

componentDidUpdate(prevProps) {
  if (props.gotData && props.gotData !== prevProps.gotData) {
    alert('data came in! (child)');
  }
}

假设您的 API 请求不是立即/太快，gotData 将首先设置为 false。然后，当 API 响应返回时，gotData 被设置为 true，并且与之前的 gotData 不同，因此触发了alert 代码。

在现实生活/更大的应用程序中，通常使用来自网络的响应，而不是 gotData，以 id 或 Redux 状态更新的形式，但这应该适用于您的情况。

希望现在更清楚了！

【讨论】：