Cara mengatur alat peraga standar komponen pada komponen Bereaksi

Saya menggunakan kode di bawah ini untuk mengatur alat peraga standar pada komponen Bereaksi tetapi tidak berfungsi. Dalam render()metode ini, saya dapat melihat output "props tidak terdefinisi" dicetak pada konsol browser. Bagaimana saya bisa menentukan nilai default untuk alat peraga komponen?

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

Anda lupa menutup Classbraket.

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" />

Bagi mereka yang menggunakan sesuatu seperti babel stage-2 atau 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' }
   };

   ...

}

Memperbarui

Pada React v15.5, PropTypestelah dipindahkan dari Paket Bereaksi utama ( tautan ):

import PropTypes from 'prop-types';

Edit

Seperti yang ditunjukkan oleh @johndodo, staticproperti kelas sebenarnya bukan bagian dari spesifikasi ES7, tetapi saat ini hanya didukung oleh babel. Diperbarui untuk mencerminkan itu.

Pertama, Anda perlu memisahkan kelas Anda dari ekstensi selanjutnya yang tidak dapat Anda perpanjang di AddAddressComponent.defaultPropsdalam, classalih - alih pindahkan ke luar.

Saya juga akan merekomendasikan Anda untuk membaca tentang siklus hidup Konstruktor dan Bereaksi: lihat Komponen Komponen dan Siklus Hidup

Inilah yang Anda inginkan:

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;

Anda juga dapat menggunakan tugas Destrukturisasi.

class AddAddressComponent extends React.Component {
  render() {

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

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

Saya suka pendekatan ini karena Anda tidak perlu menulis banyak kode.

gunakan defaultProps statis seperti:

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

Diambil dari: https://github.com/facebook/react-native/issues/1772

Jika Anda ingin memeriksa jenisnya, lihat bagaimana menggunakan PropTypes dalam jawaban treyhakanson atau Ilan Hasanov, atau tinjau banyak jawaban di tautan di atas.

Anda dapat mengatur alat peraga default menggunakan nama kelas seperti yang ditunjukkan di bawah ini.

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

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

Anda dapat menggunakan cara Bereaksi yang direkomendasikan dari tautan ini untuk info lebih lanjut

Untuk prop tipe fungsi Anda dapat menggunakan kode berikut:

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

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

Jika Anda menggunakan komponen fungsional, Anda dapat menentukan default dalam tugas penataan, seperti:

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