基于ts的useContext的使用

首先在文件最外层创建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&gt; | ((draft: dataType) =&gt; void | dataType);

export const reducers = (state: dataType, action: Actions): dataType | void | undefined =&gt; {
    if(isFunction(action)){
        action(state);
        return;
    }
    return state;
} 

export const Context = createContext<dataType &amp; { dispatch: Dispatch<Actions&gt; }&gt;(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>
    );
};

代码007普通

打赏 收藏 海报 链接