React bileşeninde bileşen varsayılan aksesuarları nasıl ayarlanır

Bir React bileşeninde varsayılan props ayarlamak için aşağıdaki kodu kullanıyorum ama bu çalışmıyor. In render()yöntemle, ben çıkış "tanımlanmamış sahne" tarayıcı konsoluna basıldığı görebilirsiniz. Bileşen props için varsayılan bir değeri nasıl tanımlayabilirim?

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

Desteği kapatmayı unuttunuz 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 veya transform-class-properties gibi bir şey kullananlar için :

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

   ...

}

Güncelleme

React v15.5'ten PropTypesitibaren ana React Paketinden ( bağlantı ) çıkarıldı :

import PropTypes from 'prop-types';

Düzenle

@Johndodo'nun belirttiği gibi, staticsınıf özellikleri aslında ES7 spesifikasyonunun bir parçası değil, şu anda yalnızca babel tarafından destekleniyor. Bunu yansıtacak şekilde güncellendi.

Öncelikle, sınıfınızı diğer uzantılardan ayırmanız gerekir, örneğin AddAddressComponent.defaultPropsiçinde genişletmek classyerine onu dışarı taşıyamazsınız.

Ayrıca, Oluşturucu ve React'in yaşam döngüsü hakkında da bilgi almanızı tavsiye ederim : bkz. Bileşen Özellikleri ve Yaşam Döngüsü

İşte istediğiniz şey:

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 atamasını da kullanabilirsiniz.

class AddAddressComponent extends React.Component {
  render() {

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

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

Çok fazla kod yazmanıza gerek olmadığı için bu yaklaşımı seviyorum.

statik bir defaultProps kullanın:

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

Alındığı: https://github.com/facebook/react-native/issues/1772

Türleri kontrol etmek isterseniz, propTypes'ı treyhakanson'un veya Ilan Hasanov'un yanıtında nasıl kullanacağınıza bakın veya yukarıdaki bağlantıdaki birçok yanıtı gözden geçirin.

Aşağıda gösterildiği gibi sınıf adını kullanarak varsayılan sahne ayarlarını yapabilirsiniz.

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

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

Daha fazla bilgi için bu bağlantıdan React'in önerilen yolunu kullanabilirsiniz.

Bir işlev türü prop için aşağıdaki kodu kullanabilirsiniz:

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

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

İşlevsel bir bileşen kullanıyorsanız, imha atamasında varsayılanları şu şekilde tanımlayabilirsiniz:

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