React toggle глобальный компонент

Question

Я получил все свои маршруты в своем приложении. js вот так:

<Route exact path="/" component={Home} />
<Route path="/explore" component={Explore} />
<Route path="/register" component={Register} />
<ProtectedRoute path="/create" component={CreatePost} />

и я хочу переключить компонент предупреждения об успехе / ошибке в качестве обратной связи, но я хочу отображать его над всем приложением независимо от того, какой компонент отображается прямо сейчас. Так что я застрял и не знаю, как лучше всего это сделать. Я попытался написать функцию для переключения оповещения в приложении. js и его экспорта, но у меня не получилось импортировать его и изменить состояние.

 onShowAlert = () => {
    this.setState({ showAlert: true };
  };

Answer 1

Если вы пытаетесь избежать передачи переключателя в качестве опоры, создайте AlertContext: https://codesandbox.io/s/great-moon-93c94?file= / src / AlertContext. js

Answer 2

Вы можете использовать назначение рендеринга и передать свой триггер обратной связи компоненту. Вы об этом спрашиваете?

function myTigger(){ console.log('triggered') }

<Route exact path="/" render={ () => <Home trigger={myTigger} />} />
<Route path="/explore" component={Explore} />
<Route path="/register" component={Register} />
<ProtectedRoute path="/create" component={CreatePost} /