Блог

Я создаю приложение для обработки данных, которое часто обновляет пользователя тостами, поэтому я настроил <ToastContainer /> компонент, содержащий метод doToast(title, time, content){...} , и он отлично работает для создания тостов на экране, которые автоматически отображаются через некоторое время.

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

}
 

На протяжении всего моего приложения у меня есть компоненты, которые совершают вызовы AJAX на мой сервер, и я хотел бы иметь возможность легко уведомлять пользователя о том, что произошло во время/после вызова, с тостом (т. Е. успех, предупреждение, сбой и т. Д.).

Единственный известный мне способ вызова методов из другого компонента-передать этот метод в качестве поддержки дочернему компоненту. Я не хочу, чтобы мне приходилось передавать doToast метод в длинную цепочку компонентов каждый раз, когда я хочу вызвать тост-есть ли способ «глобального» вызова doToast() , чтобы я мог использовать его волей-неволей?