首先在文件最外层创建context.ts文件
import { createContext, Dispatch } from 'react';
import isFunction from 'lodash/isFunction';
export type dataType = {
detailData: any;
};
export const initDetailData: dataType = {
detailData: null;
};
export type Actions = Partial<dataType> | ((draft: dataType) => void | dataType);
export const reducers = (state: dataType, action: Actions): dataType | void | undefined => {
if(isFunction(action)){
action(state);
return;
}
return state;
}
export const Context = createContext<dataType & { dispatch: Dispatch<Actions> }>(null);
这里定义了一个detailData来保存要传到子层级的数据,根据实际情况来定义detailData的数据类型,这里就用any暂代;具体使用方式如下:
import React, { UseContext, FC } from 'react';
import { Context, dateType, reducers, initDetailData, Actions } from './context';
// 这里使用了useImmerReducer,可以自行了解useReducer
import { useImmerReducer } from 'use-immer';
const Son: FC = () => {
const { dispatch, detailData } = useContext(Context);
// 这里的detailData就是父级传下来的detailData值;
console.log(detailData);
const getData = () => {
// 此处可以获取到新的data来修改detailData,修改后在该组件的子层级甚至更深层级,只要const { detailData } = useContext(Context),就能获取到这里的data;
dispatch(draft => {
draft.detailData = data;
});
};
return (
// 此处可以调用Son组件的Son组件
)
};
const Father: FC = () => {
const [state, dispatch] = useImmerReducer<dateType, Actions>(reducers, initDetailData);
// 获取或定义一个data值,来传到子组件中,这里只是示例
const data = [];
return (
<Context.Provider
value={
...state,
dispatch,
// 在父级可以先修改一次detailData的值
detailData : data || null
}
<Son />
<Context.Provider>
);
};