https://zh-hans.reactjs.org/docs/hooks-reference.html#usecontext

直接上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import PropTypes from 'prop-types';
import { createContext, useState, useEffect } from 'react';
// material
import { useMediaQuery } from '@material-ui/core';
import { useTheme } from '@material-ui/core/styles';

// ----------------------------------------------------------------------
// 定义provider的value
const initialState = {
  collapseClick: false,
  collapseHover: false,
  onToggleCollapse: () => {},
  onHoverEnter: () => {},
  onHoverLeave: () => {},
};

// 定义context
const CollapseDrawerContext = createContext(initialState);

CollapseDrawerProvider.propTypes = {
  children: PropTypes.node,
};

// 封装provider
function CollapseDrawerProvider({ children }) {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('lg'));
  const [collapse, setCollapse] = useState({
    click: false,
    hover: false,
  });

  useEffect(() => {
    if (isMobile) {
      setCollapse({
        click: false,
        hover: false,
      });
    }
  }, [isMobile]);

  const handleToggleCollapse = () => {
    setCollapse({ ...collapse, click: !collapse.click });
  };

  const handleHoverEnter = () => {
    if (collapse.click) {
      setCollapse({ ...collapse, hover: true });
    }
  };

  const handleHoverLeave = () => {
    setCollapse({ ...collapse, hover: false });
  };

  return (
    <CollapseDrawerContext.Provider
      value={{
        isCollapse: collapse.click && !collapse.hover,
        collapseClick: collapse.click,
        collapseHover: collapse.hover,
        onToggleCollapse: handleToggleCollapse,
        onHoverEnter: handleHoverEnter,
        onHoverLeave: handleHoverLeave,
      }}
    >
      {children}
    </CollapseDrawerContext.Provider>
  );
}

export { CollapseDrawerProvider, CollapseDrawerContext };

自定义钩子封装

1
2
3
4
5
6
7
8
9
10
11
import { useContext } from 'react';
import { CollapseDrawerContext } from '../contexts/CollapseDrawerContext';

// ----------------------------------------------------------------------
// 自定义useCollapseDrawer hook
const useCollapseDrawer = () => {
  return useContext(CollapseDrawerContext);
};

export default useCollapseDrawer;

函数组建使用定义的 CollapseDrawerContext
index.js

1
2
3
4
5
6
7
8
ReactDOM.render(
  <StrictMode>
    <CollapseDrawerProvider>
        <App />
    </CollapseDrawerProvider>
  </StrictMode>,
  document.getElementById('root'),
);

函数组件中使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

export default function DocumentLayout() {
  const {
    isCollapse,
    collapseClick,
    collapseHover,
    onHoverEnter,
    onHoverLeave,
  } = useCollapseDrawer();

  return (
    <div>
        <button
          onMouseEnter={onHoverEnter}
          onMouseLeave={onHoverLeave}
        ></button>
    </div>
  );
}