如何使 Snackbar 成为 withContext 的全局组件

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

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