如何在React组件上设置组件默认属性
如何在React组件上设置组件默认属性
提问于 2016-08-05 10:26:45
我使用下面的代码在React组件上设置默认属性，但它不起作用。在render()方法中，我可以看到输出"undefined props“在浏览器控制台上打印出来。如何为组件属性定义默认值？
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,
}回答 8
Stack Overflow用户
回答已采纳
发布于 2016-08-05 11:03:49
您忘了关闭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" />
Stack Overflow用户
发布于 2016-08-05 10:56:45
首先，您需要将您的类与其他扩展分开，例如，您不能在class内扩展AddAddressComponent.defaultProps，而应将其移到外部。
我还建议您阅读有关Constructor和React的生命周期的文章:请参阅Component Specs and Lifecycle
这是你想要的：
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;Stack Overflow用户
发布于 2018-01-29 00:24:48
你也可以使用解构赋值。
class AddAddressComponent extends React.Component {
render() {
const {
province="insertDefaultValueHere1",
city="insertDefaultValueHere2"
} = this.props
return (
<div>{province}</div>
<div>{city}</div>
)
}
}我喜欢这种方法，因为你不需要写太多代码。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38786973
复制相关文章
相似问题
腾讯云开发者
