时间戳

首页 > 解决方案 > 如何使用Context使snackbar成为全局组件

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

问题描述

我正在尝试使用带有 open 和 message 道具的小吃栏组件，并且我可以从应用程序的任何页面显示（设置为 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);

然后像这样将道具更改为snackbar

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

标签： reactjsmaterial-uireact-context

解决方案

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

推荐阅读