React中PropTypes验证失效问题求助

哈哈，一眼就看出问题所在了——你把PropTypes的校验规则错误地写进defaultProps里了！这两个静态属性的作用完全不同，React自然不会读取你放在defaultProps里的类型校验规则，所以哪怕你写了isRequired，开发环境也不会弹出任何警告。

核心错误点 #

defaultProps是用来给组件属性设置默认值的，而类型校验规则应该放在类的static propTypes静态属性中，这是React PropTypes的标准用法。

修正后的代码 #

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

export default class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  // 正确放置类型校验规则的位置
  static propTypes = {
    // 这里定义你的属性校验规则，比如必填的element类型
    requiredElement: PropTypes.element.isRequired
  }

  // defaultProps用来设置属性的默认值（可选，仅针对非必填属性）
  static defaultProps = {
    // 举个例子：给可选的文本属性设默认值
    optionalText: "这是默认文本"
  }

  render() {
    return ( <div></div> );
  }
}

验证效果 #

现在你尝试不传requiredElement属性来使用这个组件：

<MyComponent />

开发环境的控制台就会立刻弹出类似这样的警告：

Warning: Failed prop type: The prop requiredElement is marked as required in MyComponent, but its value is undefined.

这样就说明类型校验生效啦！

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