Update documentation to stateless components
Ref #5949 @jimfb
Max committed
Feb 15, 2016 at 08:42 UTC
ec41af055753161341c0b32be12bcc1657719289
7 files changed
+264
-318
docs/docs/06-transferring-props.it-IT.md
+47
-57
@@ -27,16 +27,14 @@ Nel resto di questo tutorial vengono illustrate le best practices, usando JSX e
27
Nella maggior parte dei casi dovresti esplicitamente passare le proprietà. Ciò assicura che venga esposto soltanto un sottoinsieme dell'API interna, del cui funzionamento si è certi.
28
29
```javascript
30
-var FancyCheckbox = React.createClass({
31
- render: function() {
32
- var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
33
- return (
34
- <div className={fancyClass} onClick={this.props.onClick}>
35
- {this.props.children}
36
- </div>
37
- );
38
- }
39
-});
30
+function FancyCheckbox(props) {
31
+ var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
32
+ return (
33
+ <div className={fancyClass} onClick={props.onClick}>
34
+ {props.children}
35
+ </div>
36
+ );
37
+}
38
ReactDOM.render(
39
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
40
Ciao mondo!
@@ -58,22 +56,20 @@ A volte passare manualmente ciascuna proprietà può essere noioso e fragile. In
56
Elenca tutte le proprietà che desideri consumare, seguite da `...other`.
57
58
```javascript
61
-var { checked, ...other } = this.props;
59
+var { checked, ...other } = props;
60
```
61
62
Ciò assicura che vengano passate tutte le proprietà TRANNE quelle che stai consumando tu stesso.
63
64
```javascript
67
-var FancyCheckbox = React.createClass({
68
- render: function() {
69
- var { checked, ...other } = this.props;
70
- var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
71
- // `other` contiene { onClick: console.log } ma non la proprietà checked
72
- return (
73
- <div {...other} className={fancyClass} />
74
- );
75
- }
76
-});
65
+function FancyCheckbox(props) {
66
+ var { checked, ...other } = props;
67
+ var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
68
+ // `other` contiene { onClick: console.log } ma non la proprietà checked
69
+ return (
70
+ <div {...other} className={fancyClass} />
71
+ );
72
+}
73
ReactDOM.render(
74
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
75
Ciao mondo!
@@ -89,15 +85,13 @@ ReactDOM.render(
85
Usa sempre il pattern di destrutturazione quando trasferisci altre proprietà sconosciute in `other`.
86
87
```javascript
92
-var FancyCheckbox = React.createClass({
93
- render: function() {
94
- var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
95
- // ANTI-PATTERN: `checked` sarebbe passato al componente interno
96
- return (
97
- <div {...this.props} className={fancyClass} />
98
- );
99
- }
100
-});
88
+function FancyCheckbox(props) {
89
+ var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
90
+ // ANTI-PATTERN: `checked` sarebbe passato al componente interno
91
+ return (
92
+ <div {...props} className={fancyClass} />
93
+ );
94
+}
95
```
96
97
## Consumare e Trasferire la Stessa Proprietà
@@ -105,23 +99,21 @@ var FancyCheckbox = React.createClass({
99
Se il tuo componente desidera consumare una proprietà, ma anche passarla ad altri, puoi passarla esplicitamente mediante `checked={checked}`. Questo è preferibile a passare l'intero oggetto `this.props` dal momento che è più facile effettuarne il linting e il refactoring.
100
101
```javascript
108
-var FancyCheckbox = React.createClass({
109
- render: function() {
110
- var { checked, title, ...other } = this.props;
111
- var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
112
- var fancyTitle = checked ? 'X ' + title : 'O ' + title;
113
- return (
114
- <label>
115
- <input {...other}
116
- checked={checked}
117
- className={fancyClass}
118
- type="checkbox"
119
- />
120
- {fancyTitle}
121
- </label>
122
- );
123
- }
124
-});
102
+function FancyCheckbox(props) {
103
+ var { checked, title, ...other } = props;
104
+ var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
105
+ var fancyTitle = checked ? 'X ' + title : 'O ' + title;
106
+ return (
107
+ <label>
108
+ <input {...other}
109
+ checked={checked}
110
+ className={fancyClass}
111
+ type="checkbox"
112
+ />
113
+ {fancyTitle}
114
+ </label>
115
+ );
116
+}
117
```
118
119
> NOTA:
@@ -150,14 +142,12 @@ z; // { a: 3, b: 4 }
142
Se non usi JSX, puoi usare una libreria per ottenere il medesimo pattern. Underscore supporta `_.omit` per omettere delle proprietà ed `_.extend` per copiare le proprietà in un nuovo oggetto.
143
144
```javascript
153
-var FancyCheckbox = React.createClass({
154
- render: function() {
155
- var checked = this.props.checked;
156
- var other = _.omit(this.props, 'checked');
157
- var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
158
- return (
159
- React.DOM.div(_.extend({}, other, { className: fancyClass }))
160
- );
161
- }
162
-});
145
+function FancyCheckbox(props) {
146
+ var checked = props.checked;
147
+ var other = _.omit(props, 'checked');
148
+ var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
149
+ return (
150
+ React.DOM.div(_.extend({}, other, { className: fancyClass }))
151
+ );
152
+}
153
```
docs/docs/06-transferring-props.ja-JP.md
+47
-57
@@ -29,16 +29,14 @@ React.createElement(Component, Object.assign({}, this.props, { more: 'values' })
29
ほとんどの場合、プロパティを明確に子要素に渡すべきです。それは、内部のAPIのサブセットだけを外に出していることと、認識しているプロパティが動作することを保証します。
30
31
```javascript
32
-var FancyCheckbox = React.createClass({
33
- render: function() {
34
- var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
35
- return (
36
- <div className={fancyClass} onClick={this.props.onClick}>
37
- {this.props.children}
38
- </div>
39
- );
40
- }
41
-});
32
+function FancyCheckbox(props) {
33
+ var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
34
+ return (
35
+ <div className={fancyClass} onClick={props.onClick}>
36
+ {props.children}
37
+ </div>
38
+ );
39
+}
40
ReactDOM.render(
41
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
42
Hello world!
@@ -59,22 +57,20 @@ ReactDOM.render(
57
以下のように `...other` を使うことで、使いたいプロパティを一覧にすることができます。
58
59
```javascript
62
-var { checked, ...other } = this.props;
60
+var { checked, ...other } = props;
61
```
62
63
これは、自分で指定したものは 除き 、全てのpropsを渡すことを保証します。
64
65
```javascript
68
-var FancyCheckbox = React.createClass({
69
- render: function() {
70
- var { checked, ...other } = this.props;
71
- var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
72
- // `other` は { onClick: console.log } を含みますが、 checked プロパティは含みません。
73
- return (
74
- <div {...other} className={fancyClass} />
75
- );
76
- }
77
-});
66
+function FancyCheckbox(props) {
67
+ var { checked, ...other } = props;
68
+ var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
69
+ // `other` は { onClick: console.log } を含みますが、 checked プロパティは含みません。
70
+ return (
71
+ <div {...other} className={fancyClass} />
72
+ );
73
+}
74
ReactDOM.render(
75
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
76
Hello world!
@@ -89,15 +85,13 @@ ReactDOM.render(
85
未知の `other` propsを移譲する際には、分割代入パターンを常に使ってください。
86
87
```javascript
92
-var FancyCheckbox = React.createClass({
93
- render: function() {
94
- var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
95
- // アンチパターン: `checked` が内部のコンポーネントに渡されます。
96
- return (
97
- <div {...this.props} className={fancyClass} />
98
- );
99
- }
100
-});
88
+function FancyCheckbox(props) {
89
+ var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
90
+ // アンチパターン: `checked` が内部のコンポーネントに渡されます。
91
+ return (
92
+ <div {...props} className={fancyClass} />
93
+ );
94
+}
95
```
96
97
## 同じpropを使い、移譲する
@@ -105,23 +99,21 @@ var FancyCheckbox = React.createClass({
99
コンポーネントがプロパティを使うだけでなく、子要素に渡したい場合は、明確に `checked={checked}` と記述することで再度渡すことができます。 `this.props` オブジェクトで全てを渡すほうが、リファクタリングやチェックをしやすいので好ましいです。
100
101
```javascript
108
-var FancyCheckbox = React.createClass({
109
- render: function() {
110
- var { checked, title, ...other } = this.props;
111
- var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
112
- var fancyTitle = checked ? 'X ' + title : 'O ' + title;
113
- return (
114
- <label>
115
- <input {...other}
116
- checked={checked}
117
- className={fancyClass}
118
- type="checkbox"
119
- />
120
- {fancyTitle}
121
- </label>
122
- );
123
- }
124
-});
102
+function FancyCheckbox(props) {
103
+ var { checked, title, ...other } = props;
104
+ var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
105
+ var fancyTitle = checked ? 'X ' + title : 'O ' + title;
106
+ return (
107
+ <label>
108
+ <input {...other}
109
+ checked={checked}
110
+ className={fancyClass}
111
+ type="checkbox"
112
+ />
113
+ {fancyTitle}
114
+ </label>
115
+ );
116
+}
117
```
118
119
> 注意:
@@ -148,14 +140,12 @@ z; // { a: 3, b: 4 }
140
JSXを使わない際には、同じパターンを行うライブラリを使うことができます。Underscoreでは、 `_.omit` を使ってプロパティをフィルタしたり、 `_.extend` を使って新しいオブジェクトにプロパティをコピーしたりできます。
141
142
```javascript
151
-var FancyCheckbox = React.createClass({
152
- render: function() {
153
- var checked = this.props.checked;
154
- var other = _.omit(this.props, 'checked');
155
- var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
156
- return (
157
- React.DOM.div(_.extend({}, other, { className: fancyClass }))
158
- );
159
- }
160
-});
143
+function FancyCheckbox(props) {
144
+ var checked = props.checked;
145
+ var other = _.omit(props, 'checked');
146
+ var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
147
+ return (
148
+ React.DOM.div(_.extend({}, other, { className: fancyClass }))
149
+ );
150
+}
151
```
docs/docs/06-transferring-props.ko-KR.md
+47
-57
@@ -27,16 +27,14 @@ React.createElement(Component, Object.assign({}, this.props, { more: 'values' })
27
대부분의 경우 명시적으로 프로퍼티를 아래로 전달해야 합니다. 이는 동작을 확신하는 내부 API의 일부만 공개하도록 합니다.
28
29
```javascript
30
-var FancyCheckbox = React.createClass({
31
- render: function() {
32
- var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
33
- return (
34
- <div className={fancyClass} onClick={this.props.onClick}>
35
- {this.props.children}
36
- </div>
37
- );
38
- }
39
-});
30
+function FancyCheckbox(props) {
31
+ var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
32
+ return (
33
+ <div className={fancyClass} onClick={props.onClick}>
34
+ {props.children}
35
+ </div>
36
+ );
37
+}
38
ReactDOM.render(
39
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
40
세상아 안녕!
@@ -59,22 +57,20 @@ ReactDOM.render(
57
소비할 프로퍼티들을 나열하고, 그 뒤에 `...other`를 넣습니다.
58
59
```javascript
62
-var { checked, ...other } = this.props;
60
+var { checked, ...other } = props;
61
```
62
63
이는 지금 소비한 props를 *제외한* 나머지를 아래로 전달합니다.
64
65
```javascript
68
-var FancyCheckbox = React.createClass({
69
- render: function() {
70
- var { checked, ...other } = this.props;
71
- var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
72
- // `other`에는 { onClick: console.log }가 포함되지만 checked 프로퍼티는 제외됩니다
73
- return (
74
- <div {...other} className={fancyClass} />
75
- );
76
- }
77
-});
66
+function FancyCheckbox(props) {
67
+ var { checked, ...other } = props;
68
+ var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
69
+ // `other`에는 { onClick: console.log }가 포함되지만 checked 프로퍼티는 제외됩니다
70
+ return (
71
+ <div {...other} className={fancyClass} />
72
+ );
73
+}
74
ReactDOM.render(
75
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
76
세상아 안녕!
@@ -90,15 +86,13 @@ ReactDOM.render(
86
미상의 `other` props을 전달할 때는 항상 구조 해체 패턴을 사용하세요.
87
88
```javascript
93
-var FancyCheckbox = React.createClass({
94
- render: function() {
95
- var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
96
- // 반례: `checked` 또한 내부 컴포넌트로 전달될 것입니다
97
- return (
98
- <div {...this.props} className={fancyClass} />
99
- );
100
- }
101
-});
89
+function FancyCheckbox(props) {
90
+ var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
91
+ // 반례: `checked` 또한 내부 컴포넌트로 전달될 것입니다
92
+ return (
93
+ <div {...props} className={fancyClass} />
94
+ );
95
+}
96
```
97
98
## 같은 Prop을 소비하고 전달하기
@@ -106,23 +100,21 @@ var FancyCheckbox = React.createClass({
100
컴포넌트가 프로퍼티를 사용하지만 계속 넘기길 원한다면, `checked={checked}`처럼 명시적으로 다시 넘길 수 있습니다. 리팩토링과 린트(lint)하기가 더 쉬우므로 이 방식이 `this.props` 객체 전부를 넘기는 것보다 낫습니다.
101
102
```javascript
109
-var FancyCheckbox = React.createClass({
110
- render: function() {
111
- var { checked, title, ...other } = this.props;
112
- var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
113
- var fancyTitle = checked ? 'X ' + title : 'O ' + title;
114
- return (
115
- <label>
116
- <input {...other}
117
- checked={checked}
118
- className={fancyClass}
119
- type="checkbox"
120
- />
121
- {fancyTitle}
122
- </label>
123
- );
124
- }
125
-});
103
+function FancyCheckbox(props) {
104
+ var { checked, title, ...other } = props;
105
+ var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
106
+ var fancyTitle = checked ? 'X ' + title : 'O ' + title;
107
+ return (
108
+ <label>
109
+ <input {...other}
110
+ checked={checked}
111
+ className={fancyClass}
112
+ type="checkbox"
113
+ />
114
+ {fancyTitle}
115
+ </label>
116
+ );
117
+}
118
```
119
120
> 주의:
@@ -152,14 +144,12 @@ z; // { a: 3, b: 4 }
144
JSX를 사용하지 않는다면 라이브러리를 사용해 같은 패턴을 쓸 수 있습니다. Underscore에서는 `_.omit`을 사용해 특정 프로퍼티를 제외하거나 `_.extend`를 사용해 새로운 객체로 프로퍼티를 복사할 수 있습니다.
145
146
```javascript
155
-var FancyCheckbox = React.createClass({
156
- render: function() {
157
- var checked = this.props.checked;
158
- var other = _.omit(this.props, 'checked');
159
- var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
160
- return (
161
- React.DOM.div(_.extend({}, other, { className: fancyClass }))
162
- );
163
- }
164
-});
147
+function FancyCheckbox(props) {
148
+ var checked = props.checked;
149
+ var other = _.omit(props, 'checked');
150
+ var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
151
+ return (
152
+ React.DOM.div(_.extend({}, other, { className: fancyClass }))
153
+ );
154
+}
155
```
docs/docs/06-transferring-props.md
+48
-58
@@ -27,16 +27,14 @@ The rest of this tutorial explains best practices. It uses JSX and experimental
27
Most of the time you should explicitly pass the properties down. This ensures that you only expose a subset of the inner API, one that you know will work.
28
29
```javascript
30
-var FancyCheckbox = React.createClass({
31
- render: function() {
32
- var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
33
- return (
34
- <div className={fancyClass} onClick={this.props.onClick}>
35
- {this.props.children}
36
- </div>
37
- );
38
- }
39
-});
30
+function FancyCheckbox(props) {
31
+ var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
32
+ return (
33
+ <div className={fancyClass} onClick={props.onClick}>
34
+ {props.children}
35
+ </div>
36
+ );
37
+}
38
ReactDOM.render(
39
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
40
Hello world!
@@ -58,22 +56,20 @@ Sometimes it's fragile and tedious to pass every property along. In that case yo
56
List out all the properties that you would like to consume, followed by `...other`.
57
58
```javascript
61
-var { checked, ...other } = this.props;
59
+var { checked, ...other } = props;
60
```
61
62
This ensures that you pass down all the props EXCEPT the ones you're consuming yourself.
63
64
```javascript
67
-var FancyCheckbox = React.createClass({
68
- render: function() {
69
- var { checked, ...other } = this.props;
70
- var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
71
- // `other` contains { onClick: console.log } but not the checked property
72
- return (
73
- <div {...other} className={fancyClass} />
74
- );
75
- }
76
-});
65
+function FancyCheckbox(props) {
66
+ var { checked, ...other } = props;
67
+ var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
68
+ // `other` contains { onClick: console.log } but not the checked property
69
+ return (
70
+ <div {...other} className={fancyClass} />
71
+ );
72
+}
73
ReactDOM.render(
74
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
75
Hello world!
@@ -89,39 +85,35 @@ ReactDOM.render(
85
Always use the destructuring pattern when transferring unknown `other` props.
86
87
```javascript
92
-var FancyCheckbox = React.createClass({
93
- render: function() {
94
- var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
95
- // ANTI-PATTERN: `checked` would be passed down to the inner component
96
- return (
97
- <div {...this.props} className={fancyClass} />
98
- );
99
- }
100
-});
88
+function FancyCheckbox(props) {
89
+ var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
90
+ // ANTI-PATTERN: `checked` would be passed down to the inner component
91
+ return (
92
+ <div {...props} className={fancyClass} />
93
+ );
94
+}
95
```
96
97
## Consuming and Transferring the Same Prop
98
105
-If your component wants to consume a property but also wants to pass it along, you can repass it explicitly with `checked={checked}`. This is preferable to passing the full `this.props` object since it's easier to refactor and lint.
99
+If your component wants to consume a property but also wants to pass it along, you can repass it explicitly with `checked={checked}`. This is preferable to passing the full `props` object since it's easier to refactor and lint.
100
101
```javascript
108
-var FancyCheckbox = React.createClass({
109
- render: function() {
110
- var { checked, title, ...other } = this.props;
111
- var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
112
- var fancyTitle = checked ? 'X ' + title : 'O ' + title;
113
- return (
114
- <label>
115
- <input {...other}
116
- checked={checked}
117
- className={fancyClass}
118
- type="checkbox"
119
- />
120
- {fancyTitle}
121
- </label>
122
- );
123
- }
124
-});
102
+function FancyCheckbox(props) {
103
+ var { checked, title, ...other } = props;
104
+ var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
105
+ var fancyTitle = checked ? 'X ' + title : 'O ' + title;
106
+ return (
107
+ <label>
108
+ <input {...other}
109
+ checked={checked}
110
+ className={fancyClass}
111
+ type="checkbox"
112
+ />
113
+ {fancyTitle}
114
+ </label>
115
+ );
116
+}
117
```
118
119
> NOTE:
@@ -150,14 +142,12 @@ z; // { a: 3, b: 4 }
142
If you don't use JSX, you can use a library to achieve the same pattern. Underscore supports `_.omit` to filter out properties and `_.extend` to copy properties onto a new object.
143
144
```javascript
153
-var FancyCheckbox = React.createClass({
154
- render: function() {
155
- var checked = this.props.checked;
156
- var other = _.omit(this.props, 'checked');
157
- var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
158
- return (
159
- React.DOM.div(_.extend({}, other, { className: fancyClass }))
160
- );
161
- }
162
-});
145
+function FancyCheckbox(props) {
146
+ var checked = props.checked;
147
+ var other = _.omit(props, 'checked');
148
+ var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
149
+ return (
150
+ React.DOM.div(_.extend({}, other, { className: fancyClass }))
151
+ );
152
+}
153
```
docs/docs/06-transferring-props.zh-CN.md
+47
-57
@@ -27,16 +27,14 @@ React.createElement(Component, Object.assign({}, this.props, { more: 'values' })
27
大部分情况下你应该显式地向下传递 props。这样可以确保只公开你认为是安全的内部 API 的子集。
28
29
```javascript
30
-var FancyCheckbox = React.createClass({
31
- render: function() {
32
- var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
33
- return (
34
- <div className={fancyClass} onClick={this.props.onClick}>
35
- {this.props.children}
36
- </div>
37
- );
38
- }
39
-});
30
+function FancyCheckbox(props) {
31
+ var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
32
+ return (
33
+ <div className={fancyClass} onClick={props.onClick}>
34
+ {props.children}
35
+ </div>
36
+ );
37
+}
38
ReactDOM.render(
39
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
40
Hello world!
@@ -58,22 +56,20 @@ ReactDOM.render(
56
列出所有要当前使用的属性，后面跟着 `...other`。
57
58
```javascript
61
-var { checked, ...other } = this.props;
59
+var { checked, ...other } = props;
60
```
61
62
这样能确保把所有 props 传下去，*除了* 那些已经被使用了的。
63
64
```javascript
67
-var FancyCheckbox = React.createClass({
68
- render: function() {
69
- var { checked, ...other } = this.props;
70
- var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
71
- // `other` 包含 { onClick: console.log } 但 checked 属性除外
72
- return (
73
- <div {...other} className={fancyClass} />
74
- );
75
- }
76
-});
65
+function FancyCheckbox(props) {
66
+ var { checked, ...other } = props;
67
+ var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
68
+ // `other` 包含 { onClick: console.log } 但 checked 属性除外
69
+ return (
70
+ <div {...other} className={fancyClass} />
71
+ );
72
+}
73
ReactDOM.render(
74
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
75
Hello world!
@@ -89,15 +85,13 @@ ReactDOM.render(
85
在传递这些未知的 `other` 属性时，要经常使用解构赋值模式。
86
87
```javascript
92
-var FancyCheckbox = React.createClass({
93
- render: function() {
94
- var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
95
- // 反模式：`checked` 会被传到里面的组件里
96
- return (
97
- <div {...this.props} className={fancyClass} />
98
- );
99
- }
100
-});
88
+function FancyCheckbox(props) {
89
+ var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
90
+ // 反模式：`checked` 会被传到里面的组件里
91
+ return (
92
+ <div {...props} className={fancyClass} />
93
+ );
94
+}
95
```
96
97
## 使用和传递同一个 Prop
@@ -105,23 +99,21 @@ var FancyCheckbox = React.createClass({
99
如果组件需要使用一个属性又要往下传递，可以直接使用 `checked={checked}` 再传一次。这样做比传整个 `this.props` 对象要好，因为更利于重构和语法检查。
100
101
```javascript
108
-var FancyCheckbox = React.createClass({
109
- render: function() {
110
- var { checked, title, ...other } = this.props;
111
- var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
112
- var fancyTitle = checked ? 'X ' + title : 'O ' + title;
113
- return (
114
- <label>
115
- <input {...other}
116
- checked={checked}
117
- className={fancyClass}
118
- type="checkbox"
119
- />
120
- {fancyTitle}
121
- </label>
122
- );
123
- }
124
-});
102
+function FancyCheckbox(props) {
103
+ var { checked, title, ...other } = props;
104
+ var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
105
+ var fancyTitle = checked ? 'X ' + title : 'O ' + title;
106
+ return (
107
+ <label>
108
+ <input {...other}
109
+ checked={checked}
110
+ className={fancyClass}
111
+ type="checkbox"
112
+ />
113
+ {fancyTitle}
114
+ </label>
115
+ );
116
+}
117
```
118
119
> 注意:
@@ -150,14 +142,12 @@ z; // { a: 3, b: 4 }
142
如果不使用 JSX，可以使用一些库来实现相同效果。Underscore 提供 `_.omit` 来过滤属性，`_.extend` 复制属性到新的对象。
143
144
```javascript
153
-var FancyCheckbox = React.createClass({
154
- render: function() {
155
- var checked = this.props.checked;
156
- var other = _.omit(this.props, 'checked');
157
- var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
158
- return (
159
- React.DOM.div(_.extend({}, other, { className: fancyClass }))
160
- );
161
- }
162
-});
145
+function FancyCheckbox(props) {
146
+ var checked = props.checked;
147
+ var other = _.omit(props, 'checked');
148
+ var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
149
+ return (
150
+ React.DOM.div(_.extend({}, other, { className: fancyClass }))
151
+ );
152
+}
153
```
docs/tips/14-communicate-between-components.ko-KR.md
+14
-16
@@ -13,23 +13,21 @@ next: expose-component-functions-ko-KR.html
13
`GroceryList` 컴포넌트가 배열로 생성된 아이템 목록을 가지고 있다고 해봅시다. 목록의 아이템이 클릭되면 아이템의 이름이 보이길 원할 겁니다:
14
15
```js
16
-var GroceryList = React.createClass({
17
- handleClick: function(i) {
18
- console.log('클릭한 아이템: ' + this.props.items[i]);
19
- },
16
+var handleClick = function(i, props) {
17
+ console.log('클릭한 아이템: ' + props.items[i]);
18
+}
19
21
- render: function() {
22
- return (
23
- <div>
24
- {this.props.items.map(function(item, i) {
25
- return (
26
- <div onClick={this.handleClick.bind(this, i)} key={i}>{item}</div>
27
- );
28
- }, this)}
29
- </div>
30
- );
31
- }
32
-});
20
+function GroceryList(props) {
21
+ return (
22
+ <div>
23
+ {props.items.map(function(item, i) {
24
+ return (
25
+ <div onClick={handleClick.bind(this, i, props)} key={i}>{item}</div>
26
+ );
27
+ })}
28
+ </div>
29
+ );
30
+}
31
32
ReactDOM.render(
33
<GroceryList items={['사과', '바나나', '크랜베리']} />, mountNode
docs/tips/14-communicate-between-components.md
+14
-16
@@ -13,23 +13,21 @@ For child-parent communication:
13
Say your `GroceryList` component has a list of items generated through an array. When a list item is clicked, you want to display its name:
14
15
```js
16
-var GroceryList = React.createClass({
17
- handleClick: function(i) {
18
- console.log('You clicked: ' + this.props.items[i]);
19
- },
16
+var handleClick = function(i, props) {
17
+ console.log('You clicked: ' + props.items[i]);
18
+}
19
21
- render: function() {
22
- return (
23
- <div>
24
- {this.props.items.map(function(item, i) {
25
- return (
26
- <div onClick={this.handleClick.bind(this, i)} key={i}>{item}</div>
27
- );
28
- }, this)}
29
- </div>
30
- );
31
- }
32
-});
20
+function GroceryList(props) {
21
+ return (
22
+ <div>
23
+ {props.items.map(function(item, i) {
24
+ return (
25
+ <div onClick={handleClick.bind(this, i, props)} key={i}>{item}</div>
26
+ );
27
+ })}
28
+ </div>
29
+ );
30
+}
31
32
ReactDOM.render(
33
<GroceryList items={['Apple', 'Banana', 'Cranberry']} />, mountNode