Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 9ce4be4

Browse files
jimfbzpao
jimfb
authored and
zpao
committed
Merge pull request facebook#6039 from mxstbr/convert-docs-to-stateless
Update documentation to stateless components (cherry picked from commit 73ad445)
1 parent d68bead commit 9ce4be4

7 files changed

+264
-318
lines changed

‎docs/docs/06-transferring-props.it-IT.md

Lines changed: 47 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -27,16 +27,14 @@ Nel resto di questo tutorial vengono illustrate le best practices, usando JSX e
2727
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.
2828

2929
```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+
}
4038
ReactDOM.render(
4139
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
4240
Ciao mondo!
@@ -58,22 +56,20 @@ A volte passare manualmente ciascuna proprietà può essere noioso e fragile. In
5856
Elenca tutte le proprietà che desideri consumare, seguite da `...other`.
5957

6058
```javascript
61-
var { checked, ...other } = this.props;
59+
var { checked, ...other } = props;
6260
```
6361

6462
Ciò assicura che vengano passate tutte le proprietà TRANNE quelle che stai consumando tu stesso.
6563

6664
```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+
}
7773
ReactDOM.render(
7874
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
7975
Ciao mondo!
@@ -89,39 +85,35 @@ ReactDOM.render(
8985
Usa sempre il pattern di destrutturazione quando trasferisci altre proprietà sconosciute in `other`.
9086

9187
```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+
}
10195
```
10296

10397
## Consumare e Trasferire la Stessa Proprietà
10498

10599
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.
106100

107101
```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+
}
125117
```
126118

127119
> NOTA:
@@ -150,14 +142,12 @@ z; // { a: 3, b: 4 }
150142
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.
151143

152144
```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+
}
163153
```

‎docs/docs/06-transferring-props.ja-JP.md

Lines changed: 47 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,14 @@ React.createElement(Component, Object.assign({}, this.props, { more: 'values' })
2929
ほとんどの場合、プロパティを明確に子要素に渡すべきです。それは、内部のAPIのサブセットだけを外に出していることと、認識しているプロパティが動作することを保証します。
3030

3131
```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+
}
4240
ReactDOM.render(
4341
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
4442
Hello world!
@@ -59,22 +57,20 @@ ReactDOM.render(
5957
以下のように `...other` を使うことで、使いたいプロパティを一覧にすることができます。
6058

6159
```javascript
62-
var { checked, ...other } = this.props;
60+
var { checked, ...other } = props;
6361
```
6462

6563
これは、自分で指定したものは 除き 、全てのpropsを渡すことを保証します。
6664

6765
```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+
}
7874
ReactDOM.render(
7975
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
8076
Hello world!
@@ -89,39 +85,35 @@ ReactDOM.render(
8985
未知の `other` propsを移譲する際には、分割代入パターンを常に使ってください。
9086

9187
```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+
}
10195
```
10296

10397
## 同じpropを使い、移譲する
10498

10599
コンポーネントがプロパティを使うだけでなく、子要素に渡したい場合は、明確に `checked={checked}` と記述することで再度渡すことができます。 `this.props` オブジェクトで全てを渡すほうが、リファクタリングやチェックをしやすいので好ましいです。
106100

107101
```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+
}
125117
```
126118

127119
> 注意:
@@ -148,14 +140,12 @@ z; // { a: 3, b: 4 }
148140
JSXを使わない際には、同じパターンを行うライブラリを使うことができます。Underscoreでは、 `_.omit` を使ってプロパティをフィルタしたり、 `_.extend` を使って新しいオブジェクトにプロパティをコピーしたりできます。
149141

150142
```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+
}
161151
```

0 commit comments

Comments
 (0)