ReactJSで3つの点が何をするか[複製]

What does three dots do in ReactJS [duplicate]


質問 written by Shubham Khatri @2018-01-19 19:23:50Z

: 5 : 2 : 3

この質問にはすでに答えがあります。

const peopleList = this.state.people.map( x => {

    return <Person key={x.name} {...x} />
})

このコードの "{... x}"とはどういう意味ですか?

コメント 1

次回は、 ...は省略記号と呼ばれます。それはグーグルを簡単にします。;)

written by 全能のラクダのモハ @2017-03-15 14:00:27Z

回答 1 written by Shubham Khatri @2017-10-03 06:50:19Z
20

これは反応する拡散演算子構文です。

MDN DOCSから:

スプレッド構文を使用すると、複数の引数(関数呼び出しの場合)、複数の要素(配列リテラルの場合)、または複数の変数(分割代入の場合)が予想される場所で式を展開できます。

あなたの場合<Person key={x.name} {...x} />それは、 Person Componentへの小道具のように見えるので、 x含まれるオブジェクトまたはプロパティ全体を送ることを意味します。

例えば、

var x = {
     name: "Hello",
     last_name: "World"

}

次に<Person key={x.name} {...x} />

上記と同等になります

The the above will be equivalent of

拡散構文が小道具と一緒に使用される順序も重要です。

次のようにプロップをコンポーネントに渡す場合を考えてください。

The order in which the spread syntax is used along with the props is also significant.

そして、あなたがのような拡散演算子構文を使用するならば

Consider a case where you pass the props to a component like

それから、prop name='xyz'は、データから解決されたkey:valueペアによって上書きされます。 したがって、最後のPersonコンポーネント呼び出しは次のようになります。

var data = {
     name: 'abc',
     age: '25',
     college: 'lmit'
}

しかしあなたがそれを書くとき

and if you use the spread operator syntax like

次に、データから解決されるプロップname='abc'は、 Person明示的に渡されるname='xyz'によって上書きされます。 したがって、最後のPerson Component呼び出しは次のようになります。

 <Person key={x.name} name='xyz' {...data} />
コメント 1

私は以前にスプレッド演算子を使ったことがありません。そうするべきです 。

written by Ved @2017-04-12 05:17:58Z

コメント 2

@Vedええと、ときどきコードが本当に短くなってとても便利になります

written by Shubham Khatri @2017-04-12 05:19:19Z

コメント 3

ええ一般的な構文の使用に慣れることがあります。ES6の威力については、さらに詳しく検討する必要があります。

written by @2017-04-12 05:20:59Z

回答 2 written by Chip Dean @2017-03-15 13:58:32Z
2

それがスプレッド演算子です。 ES2015で導入されました。 これはxのすべてのプロパティを取り、それらを要素に配布します。

{...x}は、オブジェクトxに割り当てられているすべてのプロパティを取得し、それらを<Person />割り当てます。

もっと読むことができます:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator