You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
2.5 KiB
53 lines
2.5 KiB
10 years ago
|
---
|
||
|
|
id: jsx-spread
|
||
|
|
title: JSXの拡張属性
|
||
|
|
permalink: jsx-spread-ja-JP.html
|
||
|
|
prev: jsx-in-depth-ja-JP.html
|
||
|
|
next: jsx-gotchas-ja-JP.html
|
||
|
|
---
|
||
|
|
|
||
|
|
以下のように、コンポーネントにどのようなプロパティを配置したいか前もって全て分かっている場合は、JSXを使うことは簡単です。
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
var component = <Component foo={x} bar={y} />;
|
||
|
|
```
|
||
|
|
|
||
|
|
## Propsを変更してはいけない
|
||
|
|
|
||
|
|
セットしたいプロパティが分からない場合は、以下のように後からオブジェクトに追加したいと思うでしょう。
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
var component = <Component />;
|
||
|
|
component.props.foo = x; // だめ
|
||
|
|
component.props.bar = y; // 同様にだめ
|
||
|
|
```
|
||
|
|
|
||
|
|
これはアンチパターンです。なぜなら、後々まで正しいpropTypesであるかどうかチェックすることを助けることができないことを意味するからです。これは、propTypesのエラーが隠されたスタックトレースに出力されて終わってしまうことを意味します。
|
||
|
|
|
||
|
|
propsは変更不可と考えられるべきです。propsのオブジェクトをどこかで変更することは予期せぬ結果を発生させる可能性があるので、理想的には、この時点ではpropsは固定のオブジェクトであるべきです。
|
||
|
|
|
||
|
|
## 拡張属性
|
||
|
|
|
||
|
|
以下のように、拡張属性というJSXの新しい特徴を使うことができます。
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
var props = {};
|
||
|
|
props.foo = x;
|
||
|
|
props.bar = y;
|
||
|
|
var component = <Component {...props} />;
|
||
|
|
```
|
||
|
|
|
||
|
|
あなたが渡したオブジェクトのプロパティはコンポーネントのpropsにコピーされます。
|
||
|
|
|
||
|
|
これを複数回使用したり、他の属性と組み合わせたりすることもできます。仕様書では、順序が重要となっています。後の属性は前の属性をオーバーライドします。
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
var props = { foo: 'default' };
|
||
|
|
var component = <Component {...props} foo={'override'} />;
|
||
|
|
console.log(component.props.foo); // 'override'
|
||
|
|
```
|
||
|
|
|
||
|
|
## 奇妙な `...` という表現は何でしょうか？
|
||
|
|
|
||
|
|
`...` 操作（拡張操作）は既に[ES6のarrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator)でサポートされています。[Object Rest と Spread Properties](https://github.com/sebmarkbage/ecmascript-rest-spread)のES7のプロポーザルもあります。JSXのきれいなシンタックスを供給するために、それらのサポートや開発中の標準使用を利用しています。
|