React 切换全局组件答案

【问题标题】：React toggle global ComponentReact 切换全局组件
【发布时间】：2020-11-03 01:34:09
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript reactjs web state

【解决方案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} /

【讨论】：

是的，这对我有用，谢谢，唯一困扰我的是它不是那种会炸毁我的 App.js 的重复代码

【解决方案2】：

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

【讨论】：

我认为这也可以，虽然我以前不熟悉这个概念，所以感谢分享我很感激！