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 Type 验证开始。相反，我在浏览器控制台中收到一个错误，因为字符串没有名为map的方法。

为什么 Prop Type 验证没有按预期工作？ 羚羊看看这个问题，情况似乎相同。

Answer 1

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

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

正确：

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

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