React：无状态功能组件中的 PropTypes

Question

在 React 中，我写了一个无状态的功能组件，现在想给它添加 Prop Type 验证。

List组件：

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

function List(props) {
  const todos = props.todos.map((todo, index) => (<li key={index}>{todo}</li>));
  return (<ul></ul>);
}

List.PropTypes = {
  todos: PropTypes.array.isRequired,
};

export default List;

App 组件，渲染List：

import React from 'react';
import List from './List';

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      todos: '',
    };
  }

  render() {
    return (<List todos={this.state.todos} />);
  }
}

export default App;

正如您在App 中看到的，我将this.state.todos 传递给List。由于 this.state.todos 是一个字符串，我希望 Prop 类型验证能够启动。相反，我在浏览器控制台中收到错误，因为字符串没有名为 map 的方法。

为什么道具类型验证没有按预期工作？看看this question，情况好像一模一样。

Answer 1

您应该将属性上的大小写更改为propTypes：

- List.PropTypes = {
+ List.propTypes = {
    todos: PropTypes.array.isRequired,
  };

正确：

List.propTypes = {
  todos: PropTypes.array.isRequired,
};

（PropTypes对象的instance是小写的，但是Class/Type是大写的。实例是List.propTypes。Class/Type是PropTypes。）