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验证无法按预期工作？羚牛看一下this question，情况似乎相同。

Answer 1

你应该改变

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

到

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

（PropTypes对象的实例是小写，但Class / Type是大写。实例是List.propTypes。类/类型是PropTypes。）< / p>

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

1 个答案: