React: PropTypes в функциональном компоненте без сохранения состояния

В React я написал функциональный компонент без сохранения состояния и теперь хочу добавить к нему проверку типа Prop.

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 является строкой, я ожидал, что сработает проверка типа свойства. Вместо этого я получаю сообщение об ошибке в консоли браузера, потому что строки не имеют метода с именем map.

Почему проверка типа пропуска не работает должным образом? Взгляните на этот вопрос, случай кажется идентичным.


reactjs react-proptypes
person Sven    schedule 30.07.2017    source источник

Ответы (1)


arrow_upward
131
arrow_downward

Вы должны изменить регистр свойства на propTypes:

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

Верно:

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

(Экземпляр объекта PropTypes пишется в нижнем регистре, а класс / тип - в верхнем регистре. Экземпляр - List.propTypes. Класс / тип - PropTypes.)

person Bhargav Ponnapalli    schedule 30.07.2017
comment
Быстро и легко, спасибо! Я просто не заметил этого, ооо. - person Sven; 30.07.2017
comment
Чтобы выявить такие грязные ошибки, вы можете использовать github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/ - person Sergey Orlov; 10.09.2017
comment
Для ясности, если кого-то волнует различие, List.propTypes не на самом деле является экземпляром PropTypes. Это простой объект javascript. Фактически, PropTypes даже не класс: это еще и объект. Экземпляр в этом ответе не подразумевается в объектно-ориентированном смысле. - person Stone Mason; 31.05.2019
comment
Классы - это объекты - person challet; 24.12.2019