วิธีตั้งค่าอุปกรณ์ประกอบฉากเริ่มต้นของคอมโพเนนต์บน React component

ฉันใช้รหัสด้านล่างเพื่อตั้งค่าอุปกรณ์ประกอบฉากเริ่มต้นในส่วนประกอบ 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 Package หลัก ( ลิงค์ ):

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;

คุณยังสามารถใช้การกำหนดโครงสร้างการทำลายล้าง

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

หากคุณต้องการตรวจสอบประเภทดูวิธีใช้ PropTypes ในคำตอบของ Treyhakanson หรือ Ilan Hasanov หรือตรวจสอบคำตอบมากมายในลิงค์ด้านบน

คุณสามารถตั้งค่าอุปกรณ์ประกอบฉากเริ่มต้นโดยใช้ชื่อคลาสดังที่แสดงด้านล่าง

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