如果你想包含渲染道具组件:

  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node,
    PropTypes.func
  ])

这里的答案似乎并没有完全涵盖对孩子们的检查。node和object太允许，我想检查确切的元素。这是我最终使用的:

使用oneOfType([])允许使用单个或一组子元素 对于单个子数组和数组子数组，分别使用shape和arrayOf(shape({})) 对于子元素本身使用oneOf

最后，是这样的:

import PropTypes from 'prop-types'
import MyComponent from './MyComponent'

children: PropTypes.oneOfType([
  PropTypes.shape({
    type: PropTypes.oneOf([MyComponent]),
  }),
  PropTypes.arrayOf(
    PropTypes.shape({
      type: PropTypes.oneOf([MyComponent]),
    })
  ),
]).isRequired

这个问题帮助我更清楚地了解了这一点:https://github.com/facebook/react/issues/2979

如果您想精确匹配某个组件类型，请选中此选项

MenuPrimary.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(MenuPrimaryItem),
    PropTypes.objectOf(MenuPrimaryItem)
  ])
}

如果您希望精确匹配某些组件类型，请选中此选项

const HeaderTypes = [
  PropTypes.objectOf(MenuPrimary),
  PropTypes.objectOf(UserInfo)
]

Header.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.oneOfType([...HeaderTypes])),
    ...HeaderTypes
  ])
}

PropTypes文档有以下内容

// Anything that can be rendered: numbers, strings, elements or an array
// (or fragment) containing these types.
optionalNode: PropTypes.node,

你可以使用PropTypes。节点来检查对象或对象数组

static propTypes = {
   children: PropTypes.node.isRequired,
}

对我来说，这取决于组件。如果你知道你需要填充什么，那么你应该尝试指定独占的，或多个类型使用:

PropTypes.oneOfType 

如果你想引用一个React组件，那么你将寻找

PropTypes.element

尽管如此,

PropTypes.node

描述任何可以呈现的东西——字符串、数字、元素或这些东西的数组。如果这适合你，那么这就是方法。

对于非常通用的组件，可以有许多类型的子组件，您还可以使用下面的方法。但是我不建议这样做。正如下面的评论中提到的，它确实在某种程度上破坏了使用PropTypes的意义，而且通常还有其他方法来指定组件所需的内容。还要记住，eslint和ts可能(可能)不喜欢这种缺乏特异性:

PropTypes.any

例子:

import React from 'react';
import PropTypes from 'prop-types';

class MenuItem extends React.Component {
    render() {
        return (
            <li>
                <a href={this.props.href}>{this.props.children}</a>
            </li>
        );
    }
}

MenuItem.defaultProps = {
    href: "/",
    children: "Main page"
};

MenuItem.propTypes = {
    href: PropTypes.string.isRequired,
    children: PropTypes.string.isRequired
};

export default MenuItem;

图片:如果预期的类型不同，在控制台显示错误