Question

我的App.js中的所有路由都是这样的：

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

，我想将“成功/错误警报”组件切换为“反馈”，但是无论当前呈现哪个组件，我都希望将其显示在整个应用程序上方。所以我被困住了，不知道什么是最好的方法。我试图编写一个函数来切换App.js中的Alert并将其导出，但是对我来说导入和更改状态无效。

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

Answer 1

您可以使用渲染分配并将您的反馈触发器传递给组件。这是您要问的吗？

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

Answer 2

如果您试图避免将切换器作为道具传递，则创建一个AlertContext： https://codesandbox.io/s/great-moon-93c94?file=/src/AlertContext.js

反应切换全局组件

2 个答案: