Javascript React.js-如何调用组件'；从任何地方都可以轻松地使用什么方法？

我正在构建一个经常更新用户的数据处理应用程序，因此我设置了一个

组件，其中包含一个方法

doToast（title，time，content）{…}

，它可以很好地在屏幕上生成一个toast，在一段时间后自动隐藏

export default class ToastContainer extends Component {

  constructor(props) {
    super(props);

    this.state = {
      toastList: [],
    }

    this.pushToast = this.pushToast.bind(this);
  }

  render() {
    return(
      
      <div id="toast-container" className="toast-container position-absolute top-0 end-0 p-3" style={{'zIndex': 999}}>

        {this.state.toastList.map(toast => (

          <Toast ... />

        ))}

      </div>
    )
  }

  pushToast(title, time, content)
  {

    var newToast = {
      title: title,
      time: time,
      content: content,
    }

    this.setState({
      toastList: [...this.state.toastList, newToast]
    })
  }

}

将默认类导出到stcontainer扩展组件{
建造师（道具）{
超级（道具）；
此.state={
祝酒嘉宾：[]，
}
this.pushToast=this.pushToast.bind（this）；
}
render（）{
返回(
{this.state.toastList.map（toast=>(
))}
)
}
pushToast（标题、时间、内容）
{
var newToast={
标题:标题,，
时间:时间,，
内容:内容,，
}
这是我的国家({
toastList:[…this.state.toastList，newToast]
})
}
}

在我的整个应用程序中，我都有一些组件可以对我的后端进行AJAX调用，我希望能够通过祝酒词（即成功、警告、失败等）轻松地将调用期间/之后发生的事情通知用户

---

我知道从另一个组件调用方法的唯一方法是将该方法作为道具传递给子组件。我不想每次调用toast时都必须将

doToast

方法传递给一长串组件——有没有一种方法可以“全局”调用

doToast（）

，这样我就可以随意使用它？

也许可以查看

上下文
api？我认为您可以使用
useReducer
，它将通过上下文公开添加新祝酒词的函数。您的
toastcainer
可以从上下文中读取状态，然后进行渲染。我已经用功能组件做了类似的事情-。它可能会要求您创建帐户，对此表示抱歉。