React 구성요소에 구성요소 기본 소품을 설정하는 방법

React 구성요소에 구성요소 기본 소품을 설정하는 방법

React 컴포넌트에 디폴트 소품을 설정하기 위해 다음 코드를 사용하지만 동작하지 않습니다.에서render()method, 출력 "정의되지 않은 소품"이 브라우저 콘솔에 인쇄된 것을 볼 수 있습니다.컴포넌트 소품 기본값을 정의하려면 어떻게 해야 합니까?

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메인 리액트 패키지(링크)에서 이동되었습니다.

import PropTypes from 'prop-types';

편집

@johndodo가 지적한 바와 같이static클래스 속성은 실제로는 ES7 사양의 일부가 아니라 현재 babel에서만 지원됩니다.그것을 반영하여 갱신되었습니다.

먼저 클래스를 연장할 수 없는 추가 내선번호와 분리해야 합니다.AddAddressComponent.defaultProps의 범위 내에서class대신 밖으로 옮기세요.

컨스트럭터와 리액트의 라이프 사이클에 대해서도 읽어보시길 권장합니다.컴포넌트의 사양과 라이프 사이클을 참조해 주세요.

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

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;

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

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

또한 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의 답변에서 PropTypes를 사용하는 방법을 보거나 위 링크의 많은 답변을 확인하십시오.

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

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

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

자세한 내용은 이 링크에서 React 권장 방법을 참조하십시오.

함수 유형 소품에는 다음 코드를 사용할 수 있습니다.

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

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

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

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

언급URL : https://stackoverflow.com/questions/38786973/how-to-set-component-default-props-on-react-component