无状态函数组件中的PropType

Question

在React中，我编写了一个无状态功能组件，现在想向其添加Prop类型验证。

列表组件：

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：

js prettyprint-override">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中看到的，我正在传递这个。状态待办事项至列表。因为这个。状态todos是一个字符串，我希望道具类型验证能够生效。相反，我在浏览器控制台中得到一个错误，因为字符串没有名为map的方法。

为什么道具类型验证没有按预期工作？看看这个问题，情况似乎是一样的。

Answer 1

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

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

对的：

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

（PropTypes对象的实例是小写的，但Class/Type是大写的。该实例是List.prop类型。类/类型是PropTypes。（