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：

Translated:

App component, rendering 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 是字符串，因此我希望属性类型验证能够起作用。但是，浏览器控制台显示错误，因为字符串没有名为 map 的方法。

为什么属性类型验证没有按预期工作？查看此问题，情况似乎完全相同。

- Sven

Answer 1

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

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

正确的:

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

一个 PropTypes 对象的实例是小写，但该类/类型是大写的。实例为 List.propTypes。类/类型为 PropTypes。

- Bhargav Ponnapalli

---

简单易懂，谢谢！我只是疏忽了，呃。 - Sven

为了消除此类错误，您可以使用 https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-typos.md。 - Sergey Orlov

为了清晰起见，如果有人关心区别的话，List.propTypes实际上并不是PropTypes的一个实例。它只是一个普通的JavaScript对象。事实上，PropTypes甚至不是一个类：它也是一个对象。在这个答案中，“实例”并不是指面向对象的意义。 - Stone Mason

类是对象。 - challet