如何使用prop-types对React Context传递的变量与函数做类型检查

我明白你想给从Context里获取的user、userInfo这些变量做类型校验——直接用prop-types确实没法像组件props那样直接套用，不过我们可以通过手动调用prop-types的校验方法来实现，下面给你两种实用的方案：

方案1：在Context Provider中做校验（推荐） #

因为Provider是Context数据的源头，在这里校验能确保所有消费组件拿到的都是符合预期的数据，避免重复校验。

修改你的store/store.js文件，在Provider组件里添加类型校验：

import React, { createContext, useState } from 'react';
import PropTypes from 'prop-types';

// 创建Context
export const appContext = createContext();

// 定义Provider组件
export const AppProvider = ({ children }) => {
  const [state, setState] = useState({
    user: null,
    userInfo: {}
  });

  // 如果你有需要传递的函数，比如更新用户信息的方法，也可以放在这里
  const contextValue = {
    state,
    // updateUser: (newUser) => setState(prev => ({ ...prev, user: newUser }))
  };

  // 定义Context值的类型规则
  const contextPropTypes = {
    state: PropTypes.shape({
      user: PropTypes.oneOfType([PropTypes.object, PropTypes.null]), // 允许user是对象或null
      userInfo: PropTypes.object.isRequired // userInfo必须是对象
    }).isRequired,
    // 如果有函数，比如updateUser: PropTypes.func.isRequired
  };

  // 手动触发类型校验
  PropTypes.checkPropTypes(
    contextPropTypes,
    contextValue,
    'prop',
    'AppContext.Provider' // 用于错误提示的标识
  );

  return (
    <appContext.Provider value={contextValue}>
      {children}
    </appContext.Provider>
  );
};

// Provider自身的children属性校验
AppProvider.propTypes = {
  children: PropTypes.node.isRequired
};

这样每次Provider渲染时，都会自动检查传递的Context值是否符合类型要求，不符合的话控制台会抛出和prop-types一致的警告。

方案2：在消费Context的组件（比如你的Drawer）中做校验 #

如果只需要在特定组件里校验Context数据，可以在组件内部手动校验：

修改你的Drawer组件：

import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { appContext } from 'store/store';

const Drawer = ({ isOpen, onCloseDrawer }) => {
  const context = useContext(appContext);

  // 定义Context的类型规则
  const contextPropTypes = {
    state: PropTypes.shape({
      user: PropTypes.oneOfType([PropTypes.object, PropTypes.null]),
      userInfo: PropTypes.object.isRequired
    }).isRequired
  };

  // 手动校验Context值
  PropTypes.checkPropTypes(
    contextPropTypes,
    context,
    'prop',
    'Drawer (useContext)' // 错误提示里的标识，方便定位
  );

  const { user, userInfo } = context.state;
  return <div>Some data</div>;
};

// 组件自身props的校验正常保留
Drawer.propTypes = {
  isOpen: PropTypes.bool.isRequired,
  onCloseDrawer: PropTypes.func.isRequired
};

export default Drawer;

关键说明 #

React Context本身不是组件，所以没法直接通过.propTypes属性绑定校验规则，必须用PropTypes.checkPropTypes这个工具方法来手动触发校验——它接收四个参数：类型规则、要校验的值、属性类型的描述（一般传'prop'）、以及错误提示里的组件/上下文标识。

最后别忘了确保你已经安装了prop-types包：

npm install prop-types
# 或者用yarn
yarn add prop-types

内容的提问来源于stack exchange，提问作者devp