React ステートレスな関数型コンポーネントにおける PropTypes

質問

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 バリデーションが期待どおりに動作しないのはなぜですか？を見てみましょう。 この質問 を見てみると、ケースは同じようです。

どのように解決するのですか？

プロパティのケーシングを propTypes :

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

正しい :

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

(その インスタンス は小文字ですが、Class/Type は大文字です。インスタンスは List.propTypes . クラス/タイプは PropTypes .)