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 验证没有按预期工作？ Takin 看看 this question，情况似乎相同。

Answer 1

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

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

正确:

List.<b>propTypes</b> = {
  待办事项：PropTypes.array.isRequired，
};

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

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

React: PropTypes in stateless functional component

reactjs

react-proptypes