From bd04b6f8abd924b2db6e52a52aef760f88eaac7c Mon Sep 17 00:00:00 2001 From: kinyaying Date: Fri, 3 Nov 2017 19:05:20 +0800 Subject: [PATCH 1/5] Update typechecking-with-proptypes.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- content/docs/typechecking-with-proptypes.md | 29 ++++++++++++++++++--- 1 file changed, 25 insertions(+), 4 deletions(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index 50c0a1a3..6dc978a0 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -147,7 +147,11 @@ MyComponent.propTypes = { 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 { render() { return ( @@ -157,9 +161,7 @@ class Greeting extends React.Component { } // Specifies the default values for props: -Greeting.defaultProps = { - name: 'Stranger' -}; +Greeting.defaultProps = defaultProps; // Renders "Hello, Stranger": 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 ( +
Hello, {this.props.name}
+ ) + } +} +``` + +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`. From bf28861146d2c54978ea58c7d775b7c81c7c8ce3 Mon Sep 17 00:00:00 2001 From: kinyaying Date: Fri, 3 Nov 2017 22:06:28 +0800 Subject: [PATCH 2/5] Update typechecking-with-proptypes.md add 'javascript' after ``` --- content/docs/typechecking-with-proptypes.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index 6dc978a0..1a1aa4a7 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -147,7 +147,7 @@ MyComponent.propTypes = { You can define default values for your `props` by assigning to the special `defaultProps` property: -``` +```javascript const defaultProps = { name: 'Stranger' }; @@ -172,7 +172,7 @@ ReactDOM.render( You can also put propTypes and defaultProps as static props inside React class. -``` +```javascript class Greeting extends Component { static defaultProps = { From 400a2c6c1c72342938237a7968b9c65dbf7dccb8 Mon Sep 17 00:00:00 2001 From: kinyaying Date: Sun, 5 Nov 2017 19:10:48 +0800 Subject: [PATCH 3/5] Update typechecking-with-proptypes.md change the words --- content/docs/typechecking-with-proptypes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index 1a1aa4a7..2b5847ee 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -170,7 +170,7 @@ ReactDOM.render( ); ``` -You can also put propTypes and defaultProps as static props inside React class. +You can also put the defaultProps as static props inside React class. ```javascript class Greeting extends Component { From b66d5442f912954d746872a99caddad84514d9d7 Mon Sep 17 00:00:00 2001 From: kinyaying Date: Tue, 7 Nov 2017 23:07:28 +0800 Subject: [PATCH 4/5] Update typechecking-with-proptypes.md Revert the code style and change the paragraph. And thanks for @bvaughn's advise. --- content/docs/typechecking-with-proptypes.md | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index 2b5847ee..ffb3d96d 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -148,10 +148,6 @@ MyComponent.propTypes = { 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 { render() { return ( @@ -161,7 +157,9 @@ class Greeting extends React.Component { } // Specifies the default values for props: -Greeting.defaultProps = defaultProps; +Greeting.defaultProps = { + name: 'Stranger' +}; // Renders "Hello, Stranger": ReactDOM.render( @@ -170,10 +168,10 @@ ReactDOM.render( ); ``` -You can also put the defaultProps as static props inside React class. +If you are using a Babel transform like [transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/) , you can also declare `defaultProps` as static property within a React component class. This syntax has not yet been finalized though and will require a compilation step to work within a browser. For more information, see the [class fields proposal](https://github.com/tc39/proposal-class-fields). ```javascript -class Greeting extends Component { +class Greeting extends React.Component { static defaultProps = { name: 'stranger' @@ -187,6 +185,4 @@ class Greeting extends Component { } ``` -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`. From 0021670de2d85daee890c1c694cad5547db9cbb3 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Tue, 7 Nov 2017 15:26:08 +0000 Subject: [PATCH 5/5] Removed an unnecessary new-line --- content/docs/typechecking-with-proptypes.md | 1 - 1 file changed, 1 deletion(-) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index ffb3d96d..1605af60 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -172,7 +172,6 @@ If you are using a Babel transform like [transform-class-properties](https://bab ```javascript class Greeting extends React.Component { - static defaultProps = { name: 'stranger' }