Jak ustawić domyślne rekwizyty komponentu na komponencie React

Question

Używam poniższego kodu do ustawiania domyślnych rekwizytów w komponencie React, ale to nie działa. W metodzie render() widzę, jak wyjście "niezdefiniowane rekwizyty" zostało wydrukowane na konsoli przeglądarki. Jak mogę zdefiniować wartość domyślną dla rekwizytów komponentów?

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

Answer 1

zapomniałeś zamknąć wspornik 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" />

Answer 2

Najpierw trzeba oddzielić swoją klasę z dalszych rozszerzeń ex nie można przedłużyć AddAddressComponent.defaultProps w class zamiast przenieść ją na zewnątrz.

Ja też zalecamy, aby przeczytać o Constructor i reagują na cykl: patrz Component Specs and Lifecycle

Oto co chcesz:

class AddAddressComponent extends React.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, 
} 

export default AddAddressComponent; 

Answer 3

Dla tych szuka rozwiązania ES7 (etap 1):

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

    ... 

} 

---

Aktualizacja

Na React v15.5, PropTypes został mov ed z głównym Reaguj Package (link):

import PropTypes from 'prop-types'; 

Answer 4

używać statycznego defaultProps jak:

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

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

Jeśli chcesz sprawdzić typy zobacz jak używać PropTypes w odpowiedzi treyhakansona lub Ilana Hasanowa, lub przejrzeć wiele odpowiedzi w powyższym łączu.

Answer 5

Możesz także użyć zadania Destructuring.

class AddAddressComponent extends React.Component { 
    render() { 

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

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

Podoba mi się to podejście, ponieważ nie trzeba pisać dużo kodu.