如何使用Context使snackbar成为全局组件

Posted 2023-04-14

【中文标题】如何使用Context使snackbar成为全局组件

【英文标题】：how to make snackbar a global component withContext

【发布时间】：2021-03-23 04:17:43

【问题描述】：

我正在尝试使用一个可以从应用程序的任何页面显示（设置为 true）的 open 和 message 道具的快餐栏组件。

据我了解，我应该使用上下文。但我不太确定从哪里开始。

这是我目前所拥有的

我想在父组件的最高层有snackbar

import  createContext  from 'react';

export const SnackbarContext = createContext();

 const [snack, setSnack] = useState(
    message: '',
    color: '',
    open: false,
  );

<SnackbarContext.Provider value= snack, setSnack >
  <Snackbar open=snack.open>
    <Alert>
      snack.message
    </Alert>
  </Snackbar>
  <ViewContainer>
    <Switch>switchRoutes</Switch>
  </ViewContainer>
</SnackbarContext.Provider>

并且能够从任何子组件调用它

import  SnackbarContext  from 'SnackbarContext';

const  snack, setSnack  = useContext(SnackbarContext);

然后把道具改成这样的snackbar

setSnack( message: 'hello', open: true)

【问题讨论】：

你能发布完整的代码吗？我可以知道<ViewContainer> <Switch>switchRoutes</Switch> </ViewContainer> 是做什么的吗？

@Rookie007 这只是我的应用程序的其余部分，可以替换为 进行测试。 来自 react-router-dom 而 switchRoutes 是所有路由的映射。

【参考方案1】：

这个解决方案确实有效，我只是打错了