web-dev-qa-db-ja.com

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は文字列です。PropType検証が開始されると予想しました。代わりに、文字列にはmapというメソッドがないため、ブラウザコンソールにエラーが表示されます。

Prop Type検証が期待どおりに機能しないのはなぜですか？ この質問 を見てください。ケースは同じようです。

reactjsreact-proptypes
30
Sven

変更する必要があります

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

に

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

（PropTypesオブジェクトのinstanceは小文字ですが、クラス/タイプは大文字です。インスタンスはList.propTypes。クラス/タイプはPropTypesです。）

61
Bhargav Ponnapalli