如何在React組件上設置組件默認道具

我使用下面的代碼來設置React組件上的默認道具，但它不起作用。在render（）方法中，我可以看到輸出「undefined props」被打印在瀏覽器控制檯上。我如何定義組件道具的默認值？如何在React組件上設置組件默認道具

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

來源

2016-08-05 Zhao Yi

你忘了關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" />

來源

2016-08-05 11:03:48

首先，你需要你的類從進一步擴展前分開您不能class內延伸AddAddressComponent.defaultProps，而不是外移動。

我也建議你閱讀有關Constructor和應對的生命週期：見Component Specs and Lifecycle

這裏是你想要的東西：

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;

來源

2016-08-05 10:56:44

你確定他們需要'constructor'和'componentWillReceiveProps'嗎？在我看來，OP只是忘記了他們的類聲明的右括號。 – ivarni

@ivarni不一定非常重要，但他理解生命週期，構造函數和類擴展。所以他會知道他在做什麼。所以我增加了一些外部鏈接 –

夠公平的，我只是想說*「你需要」*並不嚴格正確。我寧願說一些*「你可以添加這些方法來觀察生命週期」*。否則，很好的答案:) – ivarni

對於那些尋找一個ES7（階段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' } 
    }; 

    ... 

}

更新

作爲陣營V15.5的， PropTypes是mov編出主的陣營包（link）：

import PropTypes from 'prop-types';

來源

2017-06-19 18:13:30 treyhakanson

謝謝你的答案，但我想了解更多關於它的內容，所以看看'react' /'native'文件並找不到它們，文檔在那裏？ – farmcommand2

我不認爲它明確地在React文檔中，但是如果你明白什麼'static'類變量是有意義的，那麼我建議閱讀關於它們[在MDN上]（https://developer.mozilla.org/en -US /文檔/網絡/的JavaScript /參考/班/靜態）。基本上，文檔中的語法與此相同，因爲兩者都將關於道具的信息添加到類本身，而不是單個實例。 – treyhakanson

將導入更改爲：從'prop-types'導入PropTypes; – tibi

使用靜態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

如果您要檢查的類型，怎麼看在treyhakanson或Ilan Hasanov的答案中使用PropTypes，或查看上述鏈接中的許多答案。

來源

2017-11-12 14:07:16

您也可以使用解構賦值。

class AddAddressComponent extends React.Component { 
    render() { 

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

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

我喜歡這種方法，因爲您不需要編寫太多的代碼。

來源

2018-01-29 00:24:48

如何在React組件上設置組件默認道具

回答

相關問題