React.createContext

最新推荐文章于 2024-09-29 22:15:05 发布

huahua614391996

最新推荐文章于 2024-09-29 22:15:05 发布

阅读量224

点赞数 1

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/huahua614391996/article/details/142463704

版权

定义全局变量组件

import { createContext, useState } from 'react';

// 定义上下文全局变量初始值
export const MethodContext = createContext({
  generalInfo: null,
  init: (v?) => { }
});
// 定义上下文全局变量初始值type
type ContextValue = {
  generalInfo: any | { [k: string]: any },
  init: any
};

// 定义全局变量组件
function Method({ children }) {
const [generalInfo, setGeneralInfo] = useState<any>(111);
async function init() {
}

  const contextValue: ContextValue = {
    generalInfo,
  	init
  };
    return <MethodContext.Provider value={contextValue}>
    {children}
  </MethodContext.Provider>
}

使用全局变量

import React, { useContext } from 'react';
import Method from '@/Method';
import Method, { MethodContext } from '@/modules/Method';
export default function Daily() {
const { generalInfo, init } = useContext(MethodContext);
  
  useEffect(() => {
    init();
  }, []);
// 若是多层组件，只需在最外层父组件包裹一次子组件，那么内部所有组件无需包裹，也可通过MethodContext获取全局组件数据
retrun <Method>{generalInfo}</Method>
}

参考文献：react官网