대응: 스테이트리스 기능 컴포넌트의 PropType

대응: 스테이트리스 기능 컴포넌트의 PropType

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,
};

(PropTypes 객체의 인스턴스는 소문자이지만 Class/Type은 대문자입니다.인스턴스는List.propTypes. 클래스/타입은PropTypes.)

언급URL : https://stackoverflow.com/questions/45398709/react-proptypes-in-stateless-functional-component