1、Declare the defaultProps alone. And it is obeying AirBNB's styleguide.
2、Someone is confused about is it OK to put propTypes and defaultProps as static props inside React class. And we can explain about this question.
You can define default values for your `props` by assigning to the special `defaultProps` property:
You can define default values for your `props` by assigning to the special `defaultProps` property:
```javascript
```
const defaultProps = {
name: 'Stranger'
};
class Greeting extends React.Component {
class Greeting extends React.Component {
render() {
render() {
return (
return (
@ -157,9 +161,7 @@ class Greeting extends React.Component {
}
}
// Specifies the default values for props:
// Specifies the default values for props:
Greeting.defaultProps = {
Greeting.defaultProps = defaultProps;
name: 'Stranger'
};
// Renders "Hello, Stranger":
// Renders "Hello, Stranger":
ReactDOM.render(
ReactDOM.render(
@ -168,4 +170,23 @@ ReactDOM.render(
);
);
```
```
You can also put propTypes and defaultProps as static props inside React class.
```
class Greeting extends Component {
static defaultProps = {
name: 'stranger'
}
render() {
return (
<div>Hello, {this.props.name}</div>
)
}
}
```
It is considerably more convenient. But non-functional properties are not currently supported for ES2015 classes, you should install extra plugin to support this syntax. If you want to only use strictly ES2015, the former syntax is the better choice.
The `defaultProps` will be used to ensure that `this.props.name` will have a value if it was not specified by the parent component. The `propTypes` typechecking happens after `defaultProps` are resolved, so typechecking will also apply to the `defaultProps`.
The `defaultProps` will be used to ensure that `this.props.name` will have a value if it was not specified by the parent component. The `propTypes` typechecking happens after `defaultProps` are resolved, so typechecking will also apply to the `defaultProps`.