如何使snackbar成为全局组件withContext

Question

我正在尝试使用一个snackbar组件，它接受一个打开的消息属性，并且我可以从应用程序的任何页面显示(设置为true)。

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

这是我到目前为止所拥有的

我想让快餐栏位于最高的父组件上

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

然后像这样把道具改成快餐店

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

Answer 1

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