如何使 snackbar 成为带有上下文的全局组件

Question

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

根据我的理解，我应该使用 Context。但我不太确定从哪里开始。

这是我目前所拥有的

我想在最高父组件中设置快餐栏

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

Answer 1

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

如何使 snackbar 成为带有上下文的全局组件

how to make snackbar a global component withContext

reactjs

material-ui

react-context