Skip to content

Commit

Permalink
Update documentation to stateless components
Browse files Browse the repository at this point in the history 
Ref facebook#5949 @jimfb
  • Loading branch information
@mxstbr
mxstbr committed Feb 15, 2016
1 parent 2410dc7 commit ec41af0
Show file tree
Hide file tree
Showing 7 changed files with 264 additions and 318 deletions.
104 changes: 47 additions & 57 deletions docs/docs/06-transferring-props.it-IT.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,16 +27,14 @@ Nel resto di questo tutorial vengono illustrate le best practices, usando JSX e
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.

```javascript
var FancyCheckbox = React.createClass({
render: function() {
var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
return (
<div className={fancyClass} onClick={this.props.onClick}>
{this.props.children}
</div>
);
}
});
function FancyCheckbox(props) {
var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
return (
<div className={fancyClass} onClick={props.onClick}>
{props.children}
</div>
);
}
ReactDOM.render(
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
Ciao mondo!
Expand All @@ -58,22 +56,20 @@ A volte passare manualmente ciascuna proprietà può essere noioso e fragile. In
Elenca tutte le proprietà che desideri consumare, seguite da `...other`.

```javascript
var { checked, ...other } = this.props;
var { checked, ...other } = props;
```

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

```javascript
var FancyCheckbox = React.createClass({
render: function() {
var { checked, ...other } = this.props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
// `other` contiene { onClick: console.log } ma non la proprietà checked
return (
<div {...other} className={fancyClass} />
);
}
});
function FancyCheckbox(props) {
var { checked, ...other } = props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
// `other` contiene { onClick: console.log } ma non la proprietà checked
return (
<div {...other} className={fancyClass} />
);
}
ReactDOM.render(
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
Ciao mondo!
Expand All @@ -89,39 +85,35 @@ ReactDOM.render(
Usa sempre il pattern di destrutturazione quando trasferisci altre proprietà sconosciute in `other`.

```javascript
var FancyCheckbox = React.createClass({
render: function() {
var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
// ANTI-PATTERN: `checked` sarebbe passato al componente interno
return (
<div {...this.props} className={fancyClass} />
);
}
});
function FancyCheckbox(props) {
var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
// ANTI-PATTERN: `checked` sarebbe passato al componente interno
return (
<div {...props} className={fancyClass} />
);
}
```

## Consumare e Trasferire la Stessa Proprietà

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.

```javascript
var FancyCheckbox = React.createClass({
render: function() {
var { checked, title, ...other } = this.props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
var fancyTitle = checked ? 'X ' + title : 'O ' + title;
return (
<label>
<input {...other}
checked={checked}
className={fancyClass}
type="checkbox"
/>
{fancyTitle}
</label>
);
}
});
function FancyCheckbox(props) {
var { checked, title, ...other } = props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
var fancyTitle = checked ? 'X ' + title : 'O ' + title;
return (
<label>
<input {...other}
checked={checked}
className={fancyClass}
type="checkbox"
/>
{fancyTitle}
</label>
);
}
```

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

```javascript
var FancyCheckbox = React.createClass({
render: function() {
var checked = this.props.checked;
var other = _.omit(this.props, 'checked');
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
return (
React.DOM.div(_.extend({}, other, { className: fancyClass }))
);
}
});
function FancyCheckbox(props) {
var checked = props.checked;
var other = _.omit(props, 'checked');
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
return (
React.DOM.div(_.extend({}, other, { className: fancyClass }))
);
}
```
104 changes: 47 additions & 57 deletions docs/docs/06-transferring-props.ja-JP.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,16 +29,14 @@ React.createElement(Component, Object.assign({}, this.props, { more: 'values' })
ほとんどの場合、プロパティを明確に子要素に渡すべきです。それは、内部のAPIのサブセットだけを外に出していることと、認識しているプロパティが動作することを保証します。

```javascript
var FancyCheckbox = React.createClass({
render: function() {
var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
return (
<div className={fancyClass} onClick={this.props.onClick}>
{this.props.children}
</div>
);
}
});
function FancyCheckbox(props) {
var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
return (
<div className={fancyClass} onClick={props.onClick}>
{props.children}
</div>
);
}
ReactDOM.render(
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
Hello world!
Expand All @@ -59,22 +57,20 @@ ReactDOM.render(
以下のように `...other` を使うことで、使いたいプロパティを一覧にすることができます。

```javascript
var { checked, ...other } = this.props;
var { checked, ...other } = props;
```

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

```javascript
var FancyCheckbox = React.createClass({
render: function() {
var { checked, ...other } = this.props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
// `other` は { onClick: console.log } を含みますが、 checked プロパティは含みません。
return (
<div {...other} className={fancyClass} />
);
}
});
function FancyCheckbox(props) {
var { checked, ...other } = props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
// `other` は { onClick: console.log } を含みますが、 checked プロパティは含みません。
return (
<div {...other} className={fancyClass} />
);
}
ReactDOM.render(
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
Hello world!
Expand All @@ -89,39 +85,35 @@ ReactDOM.render(
未知の `other` propsを移譲する際には、分割代入パターンを常に使ってください。

```javascript
var FancyCheckbox = React.createClass({
render: function() {
var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
// アンチパターン: `checked` が内部のコンポーネントに渡されます。
return (
<div {...this.props} className={fancyClass} />
);
}
});
function FancyCheckbox(props) {
var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
// アンチパターン: `checked` が内部のコンポーネントに渡されます。
return (
<div {...props} className={fancyClass} />
);
}
```

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

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

```javascript
var FancyCheckbox = React.createClass({
render: function() {
var { checked, title, ...other } = this.props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
var fancyTitle = checked ? 'X ' + title : 'O ' + title;
return (
<label>
<input {...other}
checked={checked}
className={fancyClass}
type="checkbox"
/>
{fancyTitle}
</label>
);
}
});
function FancyCheckbox(props) {
var { checked, title, ...other } = props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
var fancyTitle = checked ? 'X ' + title : 'O ' + title;
return (
<label>
<input {...other}
checked={checked}
className={fancyClass}
type="checkbox"
/>
{fancyTitle}
</label>
);
}
```

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

```javascript
var FancyCheckbox = React.createClass({
render: function() {
var checked = this.props.checked;
var other = _.omit(this.props, 'checked');
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
return (
React.DOM.div(_.extend({}, other, { className: fancyClass }))
);
}
});
function FancyCheckbox(props) {
var checked = props.checked;
var other = _.omit(props, 'checked');
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
return (
React.DOM.div(_.extend({}, other, { className: fancyClass }))
);
}
```
Loading

0 comments on commit ec41af0

Please sign in to comment.