Cách đặt đạo cụ mặc định thành phần trên thành phần React

Tôi sử dụng mã dưới đây để đặt đạo cụ mặc định trên thành phần React nhưng nó không hoạt động. Trong render()phương thức, tôi có thể thấy đầu ra "đạo cụ không xác định" đã được in trên bảng điều khiển trình duyệt. Làm cách nào để xác định giá trị mặc định cho các đạo cụ thành phần?

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

Bạn quên đóng Classkhung.

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

Đối với những người sử dụng thứ gì đó như babel giai đoạn 2 hoặc thuộc tính lớp biến đổi :

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

   ...

}

Cập nhật

Kể từ React v15.5, PropTypesđã được chuyển ra khỏi Gói React chính ( liên kết ):

import PropTypes from 'prop-types';

Biên tập

Như @johndodo đã chỉ ra, staticcác thuộc tính lớp thực sự không phải là một phần của thông số ES7, mà hiện tại chỉ được hỗ trợ bởi babel. Cập nhật để phản ánh điều đó.

Trước tiên, bạn cần tách lớp của mình khỏi các tiện ích mở rộng khác mà bạn không thể mở rộng AddAddressComponent.defaultPropsbên trong classthay vì di chuyển nó ra bên ngoài.

Tôi cũng sẽ khuyên bạn nên đọc về vòng đời của Người xây dựng và Phản ứng: xem Thông số thành phần và Vòng đời

Đây là những gì bạn muốn:

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;

Bạn cũng có thể sử dụng phân công Hủy cấu trúc.

class AddAddressComponent extends React.Component {
  render() {

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

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

Tôi thích cách tiếp cận này vì bạn không cần phải viết nhiều mã.

sử dụng một defaultProps tĩnh như:

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

Lấy từ: https://github.com/facebook/react-native/issues/1772

Nếu bạn muốn kiểm tra các loại, hãy xem cách sử dụng PropTypes trong câu trả lời của treyhakanson hoặc Ilan Hasanov hoặc xem lại nhiều câu trả lời trong liên kết trên.

Bạn có thể đặt các đạo cụ mặc định bằng cách sử dụng tên lớp như dưới đây.

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

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

Bạn có thể sử dụng cách được đề xuất của React từ liên kết này để biết thêm

Đối với loại chức năng prop, bạn có thể sử dụng mã sau đây:

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

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

Nếu bạn đang sử dụng một thành phần chức năng, bạn có thể xác định mặc định trong việc gán hủy, như vậy:

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