reactjs - 如何通过 Reactjs ContextAPI 传递函数以将状态从一个组件更改为另一个组件

Question

我需要与其他几个人共享组件的状态，我相信执行此功能的最简单方法之一是使用 React 的 context api。

包含要操作的状态的组件是警报，遵循以下代码：

import React, { useState, createContext } from 'react';
import { Snackbar } from '@material-ui/core/';
import MuiAlert, { AlertProps } from '@material-ui/lab/Alert';

function Alert(props: AlertProps) {
  return <MuiAlert elevation={6} variant="filled" {...props} />;
}

type PropsAlertContext = {
  alertOpen: boolean;
  setAlertOpen: React.Dispatch<React.SetStateAction<boolean>>;
};

const DEFAULT_VALUE = {
  alertOpen: false,
  setAlertOpen: () => {},
};

const AlertContext = createContext<PropsAlertContext>(DEFAULT_VALUE);

const AlertContextProvider: React.FC = ({ children }) => {
  const [alertOpen, setAlertOpen] = useState(false);

  const handleAlertClose = (event?: React.SyntheticEvent, reason?: string) => {
    if (reason === 'clickaway') {
      return;
    }
    setAlertOpen(false);
  };

  return (
    <AlertContext.Provider
      value={{
        alertOpen,
        setAlertOpen,
      }}
    >
      <Snackbar
        open={alertOpen}
        autoHideDuration={6000}
        onClose={handleAlertClose}
      >
        <Alert onClose={handleAlertClose} severity="error">
          {children}
        </Alert>
      </Snackbar>
    </AlertContext.Provider>
  );
};

export { AlertContextProvider };
export default AlertContext;

以及可以访问在 Alert 中创建的上下文的任何其他组件的代码：

import React, { useContext, useCallback } from 'react';

import AlertContext from '../../hooks/Alert';

const OtherComponent: React.FC = () => {
  const { alertOpen, setAlertOpen } = useContext(AlertContext);

  const alert = useCallback(() => {
    setAlertOpen(true);
    console.log(alertOpen);
    // Here return false..
  }, [alertOpen, setAlertOpen]);
  
  return (
    <div>
        <button onClick={alert} type="button">
            alert
        </button>
    </div>
  );
};

export default OtherComponent;

发生的情况如下：我可以通过“otherComponent”访问 alertOpen 内容，但是，我无法使用 setAlertOpen 更改状态。

标签： reactjsreact-hooks