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

你应该改变

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

至

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

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