React 컴포넌트에서 컴포넌트 기본 소품을 설정하는 방법

아래 코드를 사용하여 React 구성 요소에 기본 소품을 설정했지만 작동하지 않습니다. 이 render()방법에서 출력 "정의되지 않은 소품"이 브라우저 콘솔에 인쇄 된 것을 볼 수 있습니다. 컴포넌트 소품의 기본값을 어떻게 정의 할 수 있습니까?

export default class AddAddressComponent extends Component {

render() {
   let {provinceList,cityList} = this.props
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props')
    }
    ...
}

AddAddressComponent.contextTypes = {
  router: React.PropTypes.object.isRequired
}

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
}

AddAddressComponent.propTypes = {
  userInfo: React.PropTypes.object,
  cityList: PropTypes.array.isRequired,
  provinceList: PropTypes.array.isRequired,
}

Class브래킷 을 닫는 것을 잊었습니다 .

class AddAddressComponent extends React.Component {
  render() {
    let {provinceList,cityList} = this.props
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props')
    } else {
      console.log('defined props')
    }

    return (
      <div>rendered</div>
    )
  }
}

AddAddressComponent.contextTypes = {
  router: React.PropTypes.object.isRequired
};

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
};

AddAddressComponent.propTypes = {
  userInfo: React.PropTypes.object,
  cityList: React.PropTypes.array.isRequired,
  provinceList: React.PropTypes.array.isRequired,
}

ReactDOM.render(
  <AddAddressComponent />,
  document.getElementById('app')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app" />

babel stage-2 또는 transform-class-properties 와 같은 것을 사용하는 사람들을 위해 :

import React, { PropTypes, Component } from 'react';

export default class ExampleComponent extends Component {
   static contextTypes = {
      // some context types
   };

   static propTypes = {
      prop1: PropTypes.object
   };

   static defaultProps = {
      prop1: { foobar: 'foobar' }
   };

   ...

}

최신 정보

React v15.5부터는 PropTypes기본 React 패키지 ( link )에서 제외되었습니다.

import PropTypes from 'prop-types';

편집하다

@johndodo가 지적한 것처럼 static클래스 속성은 실제로 ES7 사양의 일부가 아니며 현재 babel에서만 지원됩니다. 이를 반영하여 업데이트되었습니다.

첫째로 당신은 당신이 확장 할 수 없습니다 추가적인 확장 전에서 클래스를 분리 할 필요가 AddAddressComponent.defaultProps내 class대신 외부로 이동합니다.

나는 또한 당신에 대해 읽을 것을 권장합니다 Constructor 와 React의 라이프 사이클 : 컴포넌트 스펙과 라이프 사이클

원하는 것은 다음과 같습니다.

import PropTypes from 'prop-types';

class AddAddressComponent extends React.Component {
  render() {
    let { provinceList, cityList } = this.props;
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props');
    }
  }
}

AddAddressComponent.contextTypes = {
  router: PropTypes.object.isRequired
};

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
};

AddAddressComponent.propTypes = {
  userInfo: PropTypes.object,
  cityList: PropTypes.array.isRequired,
  provinceList: PropTypes.array.isRequired,
}

export default AddAddressComponent;

Destructuring 할당을 사용할 수도 있습니다.

class AddAddressComponent extends React.Component {
  render() {

    const {
      province="insertDefaultValueHere1",
      city="insertDefaultValueHere2"
    } = this.props

    return (
      <div>{province}</div>
      <div>{city}</div>
    )
  }
}

많은 코드를 작성할 필요가 없으므로이 방법이 마음에 듭니다.

다음과 같은 정적 defaultProps를 사용하십시오.

export default class AddAddressComponent extends Component {
    static defaultProps = {
        provinceList: [],
        cityList: []
    }

render() {
   let {provinceList,cityList} = this.props
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props')
    }
    ...
}

AddAddressComponent.contextTypes = {
  router: React.PropTypes.object.isRequired
}

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
}

AddAddressComponent.propTypes = {
  userInfo: React.PropTypes.object,
  cityList: PropTypes.array.isRequired,
  provinceList: PropTypes.array.isRequired,
}

에서 가져온 : https://github.com/facebook/react-native/issues/1772 가져옴

유형을 확인하려면 treyhakanson 또는 Ilan Hasanov의 답변에서 PropType을 사용하는 방법을 참조하거나 위의 링크에서 많은 답변을 검토하십시오.

아래와 같이 클래스 이름을 사용하여 기본 소품을 설정할 수 있습니다.

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

// Specifies the default values for props:
Greeting.defaultProps = {
  name: 'Stranger'
};

자세한 정보 는이 링크 에서 React의 권장 방법을 사용할 수 있습니다

함수 유형 prop의 경우 다음 코드를 사용할 수 있습니다.

AddAddressComponent.defaultProps = {
    callBackHandler: () => {}
};

AddAddressComponent.propTypes = {
    callBackHandler: PropTypes.func,
};

기능적 구성 요소를 사용하는 경우 다음과 같이 구조 지정 지정에서 기본값을 정의 할 수 있습니다.

export default ({ children, id="menu", side="left", image={menu} }) => {
  ...
};

class Example extends React.Component {
  render() {
    return <h1>{this.props.text}</h1>;
  }
}

Example.defaultProps = { text: 'yo' };