如何设置反应组件默认道具

小开

首先，你需要把你的类从进一步的扩展中分离出来，你不能在 class中扩展 AddAddressComponent.defaultProps，而是把它移到外面。

我还将推荐您阅读有关构造函数和 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支架。

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 第二阶段或转换-类-属性之类的东西的人:

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被移出主反应包(链接) :

import PropTypes from 'prop-types';

剪辑

正如@johndodo 所指出的，static类属性实际上并不是 ES7规范的一部分，而是目前仅受 babel 支持。更新以反映这一点。

小开

使用静态默认道具，如:

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 的答案中使用 PropType，或者查看上面链接中的许多答案。

小开

您也可以使用结构化赋值。

class AddAddressComponent extends React.Component {
render() {


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


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

我喜欢这种方法，因为您不需要编写太多代码。

小开

可以使用类名设置默认道具，如下所示。

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


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

你可以使用反应的推荐方式从这个链接为更多的信息

小开

对于函数类型道具，可以使用以下代码:

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