reactのjsx内の"..."はどのような意味なのでしょうか？

Question

<App {...props} />

Answer 1

Spread Attributesと呼ばれるものです。
ES6 javascriptで ...は配列を展開してくれるスプレッド演算子ですが、それに似た機能ですね。

var props = {}
props.x = "10";
props.y = "20";
<App {...props} />

なら、

<App x="10" y="20" />

のような感じになります。
変数props側で文字ではなく数値だと、App側のpropsにも数値でくるなど違いはあります。

けど、15.1からdeprecatedなのかな？
https://github.com/facebook/react/pull/6444
まだ利用してよいかは別途調べてみてください。

追記

raccyさんのコメントを受けて：
https://facebook.github.io/react/blog/2016/04/08/react-v15.0.1.html のChangelogにありますが、React.__spread非公開APIをdeprecatedにしたという事の様で、少なくともBabelではエラーなく展開可能なようです。(React.__spreadも直しはしてて、このAPI使ってるツールでもこの時点では動くようにはしたけどもう使うなって事ですかね)

raccyさんありがとうございます。

Comments

[raccy]

トランスパイルされたコードで`React.__spread`を使うのがdeprecatedっぽいですね。Babelだと使わない方法でトランスパイルされるみたいなので、問題なく使えるみたいです。TypeScriptも1.8.10で修正されたようですので、大丈夫だと思います。deprecatedなら、さすがに公式ドキュメントに何か書いてあるでしょうから…。

[yoppy0066]

ありがとうございます！

[flied_onion]

> raccyさん ありがとうございます。https://facebook.github.io/react/blog/2016/04/08/react-v15.0.1.html に一応ありましたが、deprecatedなのは、__spread 非公開APIだけということですね。 jsbinで(JSXで)試したとき出たんですが、 jsbinでもBabelならたしかにエラーは消えました。

Answer 2

JSX記法のSpread Attributes(訳するとすれば「属性展開」でしょうか)と言う機能です。
参考: JSX Spread Attributes | React#Spread Attributse
propsの値が展開されて入るようになります。

例えば、

var props = { a: "1", b: "2" };
var app = <App {...props} />;

と言うコードは

var app = <App a="1" b="2" />;

とほぼ同じになります。注意して欲しいのは、実際にJSXからJavaScriptの変換で上のように展開されるわけではありません。変換後のReact.createElement()にはそのままpropsを渡して、渡された関数の中で展開しています。

Comments

[yoppy0066]

ありがとうございます！