reactjs - react : PropTypes in stateless functional component

Question

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

列表组件:

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 类型验证没有按预期工作？看看this question ，情况看起来是一样的。

Answer 1

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

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

正确:

List.<b>propTypes</b> = {
  todos: PropTypes.array.isRequired,
};

(PropTypes 对象的实例为小写，但类/类型为大写。实例为 List.propTypes。类/类型为 PropTypes。)