React组件用PropTypes限制子组件类型报错，求正确实现方法

嘿，这个问题我之前也碰到过！核心原因是你对React里children的本质理解有点偏差——咱们写在JSX里的<Column />并不是Column组件的实例，而是React通过React.createElement创建的React元素对象，它的type属性才指向Column这个组件类。所以直接用PropTypes.instanceOf(Column)肯定匹配不上，这就是为啥两种用法都触发警告啦。

正确实现：自定义PropTypes校验函数 #

我们需要写一个自定义校验器，逐个检查children（不管是单个还是数组形式）的type是否为Column组件：

import PropTypes from 'prop-types';
import React from 'react';
import Column from './Column';

const Table = ({ children, data }) => {
  // 你的组件渲染逻辑
  return (
    <div className="table">
      {/* 渲染children */}
      {children}
    </div>
  );
};

Table.propTypes = {
  data: PropTypes.array.isRequired,
  children: function(props, propName, componentName) {
    const children = props[propName];
    
    // 统一把children转成数组，兼容单个/多个子元素的情况
    const childElements = React.Children.toArray(children);
    
    // 遍历每个子元素检查类型
    for (const child of childElements) {
      if (child.type !== Column) {
        return new Error(
          `Invalid prop \`${propName}\` supplied to \`${componentName}\`. 
           只能传入<Column />组件作为子元素，但你传入了\`${child.type.name || typeof child.type}\`类型的元素。`
        );
      }
    }
    
    // 校验通过返回null
    return null;
  }
};

export default Table;

为啥这个方法能行？ #

• React.Children.toArray(children)是React提供的工具方法，能把任意形式的children（单个元素、多个元素、甚至是undefined）都转换成标准数组，方便统一处理。
• 每个JSX元素最终都会被转换成React元素对象，它的type属性就是我们定义的组件类（比如<Column />的type就是Column类本身），所以直接对比child.type === Column就能精准判断是否是我们需要的子组件类型。

额外提示 #

不管你的Column是类组件还是函数组件，这个方法都能正常工作——因为函数组件的type就是对应的函数本身，类组件的type是类构造函数，对比逻辑完全通用。

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