Reactのこれらの3つのドットは何をしますか?

1006
Thomas Johansen 2015-06-26 01:21.

何をしない...、この中にコードとそれが呼ばれている?(JSXを使用して)リアクトありませんか

<Modal {...this.props} title='Modal heading' animation={false}>

27 answers

1190
T.J. Crowder 2015-06-26 01:25.

それがプロパティスプレッド表記です。ES2018で追加されました(配列/イテラブルのスプレッドは以前はES2015でした)が、Reactプロジェクトでは、トランスパイルを介して長い間サポートされています(属性だけでなく、他の場所でも実行できる場合でも、「JSXスプレッド属性」として) )。

{...this.props} 作成propsしているModal要素の個別のプロパティとして、「独自の」列挙可能なプロパティを分散します。たとえば、がthis.props含まれa: 1ているb: 2場合、

<Modal {...this.props} title='Modal heading' animation={false}>

と同じになります

<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>

ただし、動的であるため、「独自の」プロパティpropsが含まれています。

はのchildren「独自の」プロパティであるためprops、スプレッドにはそれが含まれます。したがって、これが表示されるコンポーネントに子要素がある場合、それらはに渡されますModal。開始タグと終了タグの間に子要素を配置するchildrenことは、開始タグにプロパティを配置するための単なる構文糖衣構文です。例:

class Example extends React.Component {
  render() {
    const { className, children } = this.props;
    return (
      <div className={className}>
      {children}
      </div>
    );
  }
}
ReactDOM.render(
  [
    <Example className="first">
      <span>Child in first</span>
    </Example>,
    <Example className="second" children={<span>Child in second</span>} />
  ],
  document.getElementById("root")
);
.first {
  color: green;
}
.second {
  color: blue;
}
<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

スプレッド表記は、そのユースケースだけでなく、既存のオブジェクトのほとんど(またはすべて)のプロパティを使用して新しいオブジェクトを作成する場合にも便利です。状態を変更できないため、状態を更新するときに頻繁に発生します。直接:

this.setState(prevState => {
    return {foo: {...prevState.foo, a: "updated"}};
});

その置き換えthis.state.fooとプロパティがすべて同じである新しいオブジェクトを持つfoo除くaなる性質、"updated"

const obj = {
  foo: {
    a: 1,
    b: 2,
    c: 3
  }
};
console.log("original", obj.foo);
// Creates a NEW object and assigns it to `obj.foo`
obj.foo = {...obj.foo, a: "updated"};
console.log("updated", obj.foo);
.as-console-wrapper {
  max-height: 100% !important;
}

371
Mehdi Raash 2017-01-14 07:49.

ご存知のように 、名前が表すスプレッド属性...呼ばれるので、式を展開できます。

var parts = ['two', 'three'];
var numbers = ['one', ...parts, 'four', 'five']; // ["one", "two", "three", "four", "five"]

そしてこの場合(私はそれを単純化するつもりです)。

//just assume we have an object like this:
var person= {
    name: 'Alex',
    age: 35 
}

この:

<Modal {...person} title='Modal heading' animation={false} />

に等しい

<Modal name={person.name} age={person.age} title='Modal heading' animation={false} />

つまり、これはきちんとしたショートカットだと言えます。

194
theTypan 2018-06-07 10:28.

3つのドットは、ES6のスプレッド演算子を表します。これにより、Javascriptでかなり多くのことができるようになります。

  1. 配列を連結する

    var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
    var racingGames = ['Need For Speed', 'Gran Turismo', 'Burnout'];
    var games = [...shooterGames, ...racingGames];
    
    console.log(games)  // ['Call of Duty', 'Far Cry', 'Resident Evil',  'Need For Speed', 'Gran Turismo', 'Burnout']
    
  2. 配列の破壊

      var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
      var [first, ...remaining] = shooterGames;
      console.log(first); //Call of Duty
      console.log(remaining); //['Far Cry', 'Resident Evil']
    
  3. 2つのオブジェクトを組み合わせる

    var myCrush = {
      firstname: 'Selena',
      middlename: 'Marie'
    };
    
    var lastname = 'my last name';
    
    var myWife = {
      ...myCrush,
      lastname
    }
    
    console.log(myWife); // {firstname: 'Selena',
                         //   middlename: 'Marie',
                         //   lastname: 'my last name'}
    

レストパラメータと呼ばれる3つのドットの別の使用法があり、関数へのすべての引数を1つの配列として受け取ることができます。

  1. 配列としての関数の引数

     function fun1(...params) { 
    
     }  
    
63
Tomas Nikodym 2016-09-10 04:04.

JavaScriptの3つのドットはspread / rest演算子です。

スプレッド演算子

スプレッドの構文は、式が複数の引数が期待されている場所に展開することができます。

myFunction(...iterableObj);

[...iterableObj, 4, 5, 6]

[...Array(10)]

残りのパラメーター

残りのパラメータの構文は、可変個の引数を持つ関数のために使用されています。

function(a, b, ...theArgs) {
  // ...
}

配列のspread / rest演算子はES6で導入されました。オブジェクトスプレッド/レストプロパティに関するState2の提案があります。

TypeScriptはスプレッド構文もサポートしており、マイナーな問題を抱えて古いバージョンのECMAScriptにトランスパイルできます

33
Negin 2017-02-28 02:52.

これはES6の機能であり、Reactでも使用されています。以下の例を見てください。

function Sum(x,y,z) {
   return x + y + z;
}
console.log(Sum(1,2,3)); //6

最大3つのパラメーターがある場合、この方法で問題ありません。しかし、たとえば110個のパラメーターを追加する必要がある場合はどうでしょうか。それらをすべて定義し、1つずつ追加する必要がありますか?

もちろん、SPREADと呼ばれるもっと簡単な方法があります。あなたが書くそれらすべてのパラメータを渡す代わりに:

function (...numbers){} 

パラメータがいくつあるかはわかりませんが、それらが山ほどあることはわかっています。ES6に基づいて、上記の関数を以下のように書き直し、それらの間のスプレッドとマッピングを使用して、ケーキのように簡単にすることができます。

let Sum = (...numbers) => {
return numbers.reduce((prev, current) => prev + current );
}
console.log(Sum(1, 2, 3, 4, 5, 6, 7, 8, 9));//45
18
Alireza 2017-05-27 20:06.

JSX小道具を別の方法で定義しているだけです。

...ES6では配列とオブジェクトの演算子を使用しているため(オブジェクト1はまだ完全にはサポートされていません)、基本的に、すでに小道具を定義している場合は、この方法で要素に渡すことができます。

したがって、あなたの場合、コードは次のようになります。

function yourA() {
  const props = {name='Alireza', age='35'};
  <Modal {...props} title='Modal heading' animation={false} />
}

したがって、定義した小道具は分離され、必要に応じて再利用できます。

これは次のようになります。

function yourA() {
  <Modal name='Alireza' age='35' title='Modal heading' animation={false} />
}

これらは、JSXのスプレッド演算子に関するReactチームからの引用です。

JSXスプレッド属性コンポーネントに配置するすべてのプロパティを事前に知っている場合は、JSXを簡単に使用できます。

var component = <Component foo={x} bar={y} />;

小道具の変更は悪い
設定するプロパティがわからない場合、後でオブジェクトに追加したくなるかもしれません。

var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y; // also bad

これはアンチパターンです。これは、適切なpropTypesをチェックするのをかなり後になるまで支援できないことを意味します。これは、propTypesエラーが不可解なスタックトレースで終わることを意味します。

小道具は不変と見なす必要があります。小道具オブジェクトを別の場所で変更すると、予期しない結果が生じる可能性があるため、理想的には、この時点でオブジェクトがフリーズします。

スプレッド属性
これで、スプレッド属性と呼ばれるJSXの新機能を使用できます。

var props = {};
    props.foo = x;
    props.bar = y;
    var component = <Component {...props} />;

渡したオブジェクトのプロパティは、コンポーネントの小道具にコピーされます。

これを複数回使用することも、他の属性と組み合わせることができます。仕様の順序は重要です。後の属性は前の属性を上書きします。

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'

奇妙な...表記とは何ですか?
...演算子(またはスプレッド演算子)は、ES6の配列ですでにサポートされています。ObjectRestおよびSpreadプロパティのECMAScript提案もあります。JSXでよりクリーンな構文を提供するために、これらのサポートされ開発中の標準を利用しています。

16
Andre Miras 2017-05-15 22:27.

Pythonの世界から来た人にとって、JSX SpreadAttributesはUnpackingArgument Lists(Python**演算子)と同等 です。

これがJSXの質問であることは承知していますが、類推を使用すると、より速く理解できる場合があります。

13
curiousBoy 2020-01-25 12:44.

ブランドンモレッリへの称賛。彼はここで完璧に説明しましたが、リンクがなくなる可能性があるため、以下のコンテンツを貼り付けています。

スプレッド構文は単純に3つのドットです。... これにより、0以上の引数が予想される場所で反復可能を展開できます。定義は文脈なしでは難しいです。これが何を意味するのかを理解するために、いくつかの異なるユースケースを調べてみましょう。

例1—配列の挿入 以下のコードを見てください。このコードでは、spread構文を使用していません。

var mid = [3, 4];
var arr = [1, 2, mid, 5, 6];

console.log(arr);

上記では、という名前の配列を作成しましたmid。次に、配列を含む2番目の配列を作成しますmid。最後に、結果をログアウトします。何arrを印刷する予定ですか?何が起こるかを確認するには、上の[実行]をクリックしてください。出力は次のとおりです。

[1, 2, [3, 4], 5, 6]

それはあなたが期待した結果ですか?mid配列を配列に挿入することarrで、配列内の配列になりました。それが目標ならそれでいいのです。しかし、値が1から6の単一の配列のみが必要な場合はどうでしょうか。これを実現するために、spread構文を使用できます。スプレッド構文を使用すると、配列の要素を拡張できることを忘れないでください。以下のコードを見てみましょう。すべて同じです—現在、spread構文を使用してmid配列を配列に挿入していることを除いてarr

var mid = [3, 4];
var arr = [1, 2, ...mid, 5, 6];

console.log(arr);

そして、実行ボタンを押すと、結果は次のようになります。

[1, 2, 3, 4, 5, 6]

驚くばかり!上で読んだスプレッド構文の定義を覚えていますか?ここでそれが効果を発揮します。ご覧のとおり、arr配列を作成して配列でspread演算子を使用すると、mid挿入されるだけでなく、mid配列が展開されます。この拡張は、mid配列内のすべての要素が配列に挿入されることを意味しますarr。ネストされた配列の代わりに、結果は1から6の範囲の数値の単一配列になります。

例2—数学 JavaScriptには、楽しい数学計算を実行できる数学オブジェクトが組み込まれています。この例では、を見ていきますMath.max()。慣れていない場合Math.max()は、0個以上の数値の最大値を返します。次にいくつかの例を示します。

Math.max();
// -Infinity
Math.max(1, 2, 3);
// 3
Math.max(100, 3, 4);
// 100

ご覧のとおり、複数の数値の最大値を見つけたい場合は、Math.max()複数のパラメーターが必要です。残念ながら、単一の配列を入力として使用することはできません。スプレッド構文の前Math.max()に、配列で使用する最も簡単な方法は、.apply()

var arr = [2, 4, 8, 6, 0];

function max(arr) {
  return Math.max.apply(null, arr);
}

console.log(max(arr));

それは機能します、それは本当に迷惑です。次に、spread構文でまったく同じことを行う方法を見てみましょう。

var arr = [2, 4, 8, 6, 0];
var max = Math.max(...arr);

console.log(max);

関数を作成し、applyメソッドを使用しての結果を返す代わりに、Math.max()2行のコードのみが必要です。Spread構文は、配列要素を展開し、配列内の各要素を個別にMath.max()メソッドに入力します。

例3—配列のコピー JavaScriptでは、既存の配列と同じ新しい変数を設定して配列をコピーすることはできません。次のコード例を検討してください。

var arr = ['a', 'b', 'c'];
var arr2 = arr;

console.log(arr2);

runを押すと、次の出力が得られます。

['a', 'b', 'c']

一見すると、機能しているように見えます。arrの値をarr2にコピーしたように見えます。しかし、それは起こったことではありません。ご覧のとおり、JavaScriptでオブジェクトを操作する場合(配列はオブジェクトの一種です)、値ではなく参照によって割り当てます。これは、arr2がarrと同じ参照に割り当てられていることを意味します。つまり、arr2に対して行うことはすべて、元のarr配列にも影響します(その逆も同様です)。以下をご覧ください。

var arr = ['a', 'b', 'c'];
var arr2 = arr;

arr2.push('d');

console.log(arr);

上記では、新しい要素dをarr2にプッシュしました。ただし、arrの値をログアウトすると、d値もその配列に追加されていることがわかります。

['a', 'b', 'c', 'd']

でも恐れる必要はありません!スプレッド演算子を使用できます!以下のコードを検討してください。上記とほぼ同じです。ただし、代わりに、角括弧のペア内でスプレッド演算子を使用しました。

var arr = ['a', 'b', 'c'];
var arr2 = [...arr];

console.log(arr2);

runを押すと、期待される出力が表示されます。

['a', 'b', 'c']

上記では、arrの配列値が拡張されて個々の要素になり、その後arr2に割り当てられました。これで、元のarr配列に影響を与えることなく、arr2配列を好きなだけ変更できます。

var arr = ['a', 'b', 'c'];
var arr2 = [...arr];

arr2.push('d');

console.log(arr);

繰り返しますが、これが機能する理由は、arrの値が拡張されてarr2配列定義の括弧を埋めるためです。したがって、最初の例で行ったようにarrへの参照ではなく、arrの個々の値と等しくなるようにarr2を設定しています。

ボーナスの例—文字列から配列へ 楽しい最後の例として、spread構文を使用して文字列を配列に変換できます。角括弧のペア内でスプレッド構文を使用するだけです。

var str = "hello";
var chars = [...str];

console.log(chars);

12
Code_Mode 2019-03-04 02:40.

3つのドット...は、スプレッド演算子またはレストパラメータを表します。

これにより、配列式や文字列など、反復可能なものを、関数呼び出しの引数や配列の要素が0個以上予想される場所に展開できます。

  • 2つの配列をマージします

var arr1 = [1,2,3];
var arr2 = [4,5,6];

arr1 = [...arr1, ...arr2];
console.log(arr1);  //[1, 2, 3, 4, 5, 6]

  • アレイのコピー:

var arr = [1, 2, 3];
var arr2 = [...arr];

console.log(arr); //[1, 2, 3]

注:配列をコピーするとき、スプレッド構文は事実上1レベル深くなります。したがって、次の例に示すように、多次元配列のコピーには適さない場合があります(Object.assign()およびspread構文でも同じです)。

  • 特定のインデックス(例:3)で1つの配列の値を他の配列に追加します。

var arr1 = [4,5]
var arr2 = [1,2,3,...arr1,6]
console.log(arr2);	// [1, 2, 3, 4, 5, 6]

  • newでコンストラクターを呼び出す場合:

var dateFields = [1970, 0, 1];  // 1 Jan 1970
var d = new Date(...dateFields);

console.log(d);

  • オブジェクトリテラルでの拡散:

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
console.log(clonedObj);	//{foo: "bar", x: 42}

var mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj);	//{foo: "baz", x: 42, y: 13}

fooobj1のプロパティがobj2fooプロパティによって上書きされていることに注意してください

  • 無限の数の引数を配列として表すことを可能にする残りのパラメーター構文として:

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

console.log(sum(1, 2, 3));	//6
console.log(sum(1, 2, 3, 4));	//10

注:spread構文(spreadプロパティの場合を除く)は、反復可能なオブジェクトにのみ適用できます。 したがって、以下はエラーをスローします。

var obj = {'key1': 'value1'};
var array = [...obj]; // TypeError: obj is not iterable

参考1

参考2

11
pickup limes 2017-12-23 06:04.

...(拡散演算子)に反応に使用されます。

親コンポーネントから子コンポーネントに小道具を渡すためのきちんとした方法を提供します。たとえば、親コンポーネントでこれらの小道具が与えられた場合、

this.props = {
  username: "danM",
  email: "[email protected]"
}

それらは次の方法で子供に渡される可能性があります。

<ChildComponent {...this.props} />

これに似ています

<ChildComponent username={this.props.username} email={this.props.email} />

しかし、ずっときれいです。

4
Developer 2016-09-25 03:28.

3つのドット(...)はスプレッド演算子と呼ばれ、これは概念的にES6配列スプレッド演算子に似ています。JSXはこれらのサポートされ開発中の標準を利用して、JSXでよりクリーンな構文を提供します。

オブジェクト初期化子のspreadプロパティは、提供されたオブジェクトから新しく作成されたオブジェクトに独自の列挙可能なプロパティをコピーします。

let n = { x, y, ...z };
n; // { x: 1, y: 2, a: 3, b: 4 }

参照:

1)https://github.com/sebmarkbage/ecmascript-rest-spread#spread-properties

2)https://facebook.github.io/react/docs/jsx-spread.html

3
Keet Sugathadasa 2020-05-09 06:51.

...(Javascriptでは3つのドット)は、SpreadSyntaxまたはSpreadOperatorと呼ばれます。これにより、配列式や文字列などの反復可能オブジェクトを展開したり、オブジェクト式をどこに配置しても展開したりできます。これはReactに固有のものではありません。これはJavascript演算子です。

ここでのこれらの回答はすべて役に立ちますが、Spread構文(Spread演算子)の最もよく使用される実用的なユースケースをリストアップしたいと思います。

1.配列の結合(配列の連結)

配列を組み合わせるにさまざまな方法がありますが、spread演算子を使用すると、これを配列内の任意の場所に配置できます。2つの配列を組み合わせて、配列内の任意の場所に要素を配置する場合は、次のように実行できます。

var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];

// arr2 = ["one", "two", "three", "four", "five"]

2.配列のコピー

配列のコピーが必要なときは、以前Array.prototypr.slice()メソッドがありました。ただし、spread演算子でも同じことができます。

var arr = [1,2,3];
var arr2 = [...arr];
// arr2 = [1,2,3]

3.適用せずに関数を呼び出す

ES5では、2つの数値の配列をdoStuff()関数に渡すために、次のようにFunction.prototype.apply()メソッドを使用することがよくあります。

function doStuff (x, y, z) { }
var args = [0, 1, 2];

// Call the function, passing args
doStuff.apply(null, args);

ただし、spread演算子を使用すると、配列を関数に渡すことができます。

doStuff(...args);

4.アレイの破壊

destructuringとrest演算子を一緒に使用して、必要に応じて情報を変数に抽出できます。

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

5.レストパラメータとしての関数の引数

ES6には、関数の残りのすべての引数を配列に収集する残りのパラメーターである3つのドット(...)もあります。

function f(a, b, ...args) {
  console.log(args);
}

f(1,2,3,4,5);
// [ 3, 4, 5 ]

6.数学関数の使用

引数としてspreadが使用されている関数は、任意の数の引数を受け入れることができる関数で使用できます。

let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1

7.2つのオブジェクトを組み合わせる

スプレッド演算子を使用して、2つのオブジェクトを組み合わせることができます。これは、それを行うための簡単でクリーンな方法です。

var carType = {
  model: 'Toyota',
  yom: '1995'
};

var carFuel = 'Petrol';

var carData = {
  ...carType,
  carFuel
}

console.log(carData); 
// {
//  model: 'Toyota',
//  yom: '1995',
//  carFuel = 'Petrol'
// }

8.文字列を別々の文字に分割する

スプレッド演算子を使用して、文字列を別々の文字に拡散できます。

let chars = ['A', ...'BC', 'D'];
console.log(chars); // ["A", "B", "C", "D"]

SpreadOperatorを使用する他の方法を考えることができます。ここにリストしたのは、その一般的な使用例です。

2
Hetal Rachh 2019-04-17 23:37.

...の意味は、コード内のどこで使用するかによって異なります。

  1. 配列/オブジェクトの拡散/コピーに使用 -配列/オブジェクトのコピー、および新しい配列値の追加/オブジェクトへの新しいプロパティの追加に役立ちます。これはオプションです。

const numbers = [1,2,3];
const newNumbers = [...numbers, 4];
console.log(newNumbers) //prints [1,2,3,4] 

const person = {
 name: 'Max'
};

const newPerson = {...person, age:28};
console.log(newPerson); //prints {name:'Max', age:28}

  1. 関数の引数を単一の配列にマージするために使用されます-その後、配列関数を使用できます。

const filter = (...args) => {
   return args.filter(el => el ===1);
}

console.log(filter(1,2,3)); //prints [1] 

2
Mark Shanahan ッ 2019-11-21 02:29.

これはスプレッド演算子です...

たとえば、配列first=[1,2,3,4,5]と別の配列がある場合ですsecond=[6,7,8]

[...first, ...second] //result is [1,2,3,4,5,6,7,8]

同じことがjsonオブジェクトでも実行できます。

2
Sikindar Mirza 2018-02-02 19:27.

要するに、3つのドット...はES6(ES2015)のスプレッド演算子です。Spread演算子は、すべてのデータをフェッチします。

let a = [1, 2, 3, 4];
let b = [...a, 4, 5, 6];
let c = [7,8,...a];


console.log(b);

結果が表示されます[1,2,3,4,5,6]

console.log(c);

結果が表示されます[7,8,1,2,3,4]

2
Gopinath Kaliappan 2017-11-08 06:17.

簡単な方法で複数のプロパティを渡すために使用されるスプレッド属性

{... this.props}はthis.propsのプロパティを保持しています

以下の小道具での{...}スプレッド演算子の使用

this.props = 
 { 
    firstName: 'Dan', 
    lastName: 'Abramov', 
    city: 'New York',
    country: 'USA' 
}

{...}スプレッドなし

<Child 
  firstName={this.props.firstName}
  lastName={this.props.lastName}
  city={this.props.city}
  country={this.props.country}

> 

{...}スプレッド付き

<Child { ...this.props } />

Spread演算子(Reduxの作成者)に関するDanAbramovのツイート

1
keerthi c 2018-10-31 19:10.

通常、スプレッド演算子と呼ばれ、必要な場所に展開するために使用されます

const SomeStyle = {
   margin:10,
   background:#somehexa
}

スプレッド演算子Spread構文について、必要な場所でこれを使用できます

1
Shashiwadana 2019-10-18 21:56.

...この構文はES6の一部であり、Reactでのみ使用できるものではありません。2つの異なる方法で使用できます。スプレッド演算子または残りのパラメーターとして。この記事から詳細を見つけることができます:https//www.techiediaries.com/react-spread-operator-props-setstate/

あなたが質問で言ったことはこのようなものです、このように仮定しましょう、

    function HelloUser() {
      return <Hello Name="ABC" City="XYZ" />;
    }

スプレッド演算子を使用すると、このようなコンポーネントに小道具を渡すことができます。

     function HelloUser() {
       const props = {Name: 'ABC', City: 'XYZ'};
       return <Hello {...props} />;
     }
1
Muzamil301 2020-10-02 01:49.

これらの3つのドットはスプレッド演算子と呼ばれます。Spread演算子は、reactでコピー状態または小道具を作成するのに役立ちます。

反応状態でのスプレッド演算子の使用

const [myState, setMyState] = useState({
    variable1: 'test',
    variable2: '',
    variable3: ''
});

setMyState({...myState, variable2: 'new value here'});

上記のコードでは、spread演算子は現在の状態のコピーを維持し、同時に新しい値を追加します。これを行わないと、状態はvariable2の値のみになります spread演算子は、最適化コードの記述に役立ちます

1
Supun Praneeth 2020-10-27 21:12.

このシンプルで速いことを理解したい人のために:

まず第一に、これは反応するためだけの構文ではありません。これは、配列とオブジェクトを反復(マージ、追加など)するSpread構文と呼ばれるES6の構文です。ここでもっと読む

だから質問に答えてください:あなたがこのタグを持っていると想像してみましょう:

<UserTag name="Supun" age="66" gender="male" />

そしてあなたはこれをします:

const user = {
  "name"=>"Joe",
  "age"=>"50"      
  "test"=>"test-val"
};

<UserTag name="Supun" gender="male"  {...user} age="66" />

その場合、タグは次のようになります。

<UserTag name="Joe" gender="male" test="test-val" age="66" />

したがって、reactタグでSpread構文を使用すると、タグの属性がオブジェクト属性として取得され、指定されたオブジェクトとマージ(存在する場合は置換)されますuser。また、属性の後ではなく、属性の前でのみ置き換えられることに気付いたかもしれません。したがって、この例では、年齢はそのままです。

これがお役に立てば幸いです:)

0
esewalson 2018-09-26 08:43.

Reactアプリケーションで小道具を渡すのが一般的な方法です。これを行うことで、子コンポーネントが純粋であるか不純であるか(ステートレスまたはステートフル)に関係なく、子コンポーネントに状態変更を適用できます。小道具を渡すときの最良のアプローチは、単一のプロパティまたはプロパティのオブジェクト全体を渡すことである場合があります。ES6での配列のサポートにより、「...」表記が与えられ、これにより、オブジェクト全体を子に渡すことができるようになりました。

小道具を子に渡す一般的なプロセスは、次の構文で示されます。

var component = <Component foo={x} bar={y} />;

これは、小道具の数が最小限の場合は問題ありませんが、小道具の数が多くなりすぎると管理できなくなります。このメソッドの問題は、子コンポーネント内で必要なプロパティがわからない場合に発生します。一般的なJavaScriptメソッドは、これらのプロパティを単純に設定し、後でオブジェクトにバインドすることです。これにより、propTypeチェックと不可解なスタックトレースエラーの問題が発生しますが、これらは役に立たず、デバッグの遅延を引き起こします。以下は、この方法の例とすべきでないことです。

var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y;

これと同じ結果を達成できますが、これを行うことでより適切な成功を収めることができます。

var props = {};
props.foo = x;
props.bar = y;
var component = Component(props); // Where did my JSX go?

ただし、JSXスプレッドまたはJSXを使用しないため、これを方程式にループバックするために、次のようなことができます。

var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;

「... props」に含まれるプロパティは、foo:x、bar:yです。これを他の属性と組み合わせて、次の構文を使用して「... props」のプロパティをオーバーライドできます。

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'

さらに、他のプロパティオブジェクトを相互にコピーしたり、次のように組み合わせたりすることができます。

var oldObj = { foo: 'hello', bar: 'world' };
var newObj = { ...oldObj, foo: 'hi' };
console.log(newObj.foo); // 'hi';
console.log(newObj.bar); // 'world';

または、このように2つの異なるオブジェクトをマージします(これはすべてのreactバージョンでまだ利用できるわけではありません):

var ab = { ...a, ...b }; // merge(a, b)

Facebookのreact / docsサイトによると、これを説明する別の方法は次のとおりです。

すでに「props」をオブジェクトとして持っていて、それをJSXに渡したい場合は、「...」をSPREAD演算子として使用して、propsオブジェクト全体を渡すことができます。次の2つの例は同等です。

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}



function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

スプレッド属性は、汎用コンテナを構築するときに役立ちます。ただし、関係のない多くの小道具を、それらを気にしないコンポーネントに簡単に渡すことができるため、コードが乱雑になる可能性もあります。この構文は慎重に使用する必要があります。

0
Kaushal Regmi 2019-03-02 04:39.

その呼ばれるスプレッド演算子。たとえば、let hello = {name: ''、msg: ''} let hello1 = {... hello}これで、helloオブジェクトのプロパティがhello1にコピーされます。

0
Nontachai 2018-09-20 16:53.

これは、JavaScriptではスプレッド構文と呼ばれます。

javascriptで配列またはオブジェクトを破棄するために使用します。

例:

const objA = { a: 1, b: 2, c: 3 }
const objB = { ...objA, d: 1 }
/* result of objB will be { a: 1, b: 2, c: 3, d: 1 } */
console.log(objB)

const objC = { ....objA, a: 3 }
/* result of objC will be { a: 3, b: 2, c: 3, d: 1 } */
console.log(objC)

Object.assign()javascriptの関数でも同じ結果が得られます。

参照:構文の拡散

0
Singhi John 2019-11-26 16:27.

これは次のようにコンパイルされます。

React.createElement(Modal, { ...this.props, title: "Modal heading", animation: false }, child0, child1, child2, ...)

それはより多くの二つの性質を与える場所titleanimation超えpropsホスト要素があります。

...Spreadと呼ばれるES6演算子です。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntaxを参照してください

0
raheel shahzad 2020-01-02 06:02.

スプレッド演算子(トリプル演算子)はecamaスクリプト6(ES6)で導入されます。Ecamaスクリプト(ES6)はjavascriptのラッパーです。

小道具に演算子の列挙可能なプロパティを広げます。this.props = {firstName: 'Dan'、lastName: 'Abramov'、city: 'New York'、country: 'USA'}

{... this.props} = {firstName: 'Dan'、lastName: 'Abramov'、city: 'New York'、country: 'USA'}

ただし、主な機能拡散演算子は参照型に使用されます。

For example
let person= {
    name: 'Alex',
    age: 35 
}
person1= person;

person1.name = "Raheel";

console.log( person.name); // output: Raheel

これは参照型と呼ばれ、1つのオブジェクトはメモリ内で共有可能であるため、他のオブジェクトに影響を与えます。値を個別に取得する場合は、スプレッドメモリを意味します。両方ともスプレッド演算子を使用します。

 let person= {
        name: 'Alex',
        age: 35 
    }
person2 = {...person};

person2.name = "Shahzad";

console.log(person.name); // output: Alex
0
Asgar Ali Khachay 2020-02-20 01:27.

要素の配列があり、使用する要素を表示したい場合は... arrayemamentsを使用すると、すべての要素が繰り返されます。

0
kta 2020-09-10 20:09.
const Profile =  {
          firstName: "kazi",
          lastName: "ahsan"
   }

const ProfileUpdate =  {
          firstName: "kazi",
          lastName: "ahsan"
 }


const newProfile = {...Profile, ...ProfileUpdate}

これが誰かを助けることを願っています。

Related questions

MORE COOL STUFF

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする&nbsp;

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

ラーム・エマニュエルがシカゴ警察の警視を解雇し、身を守る

ラーム・エマニュエルがシカゴ警察の警視を解雇し、身を守る

シカゴ市長のラーム・エマニュエルは、シカゴの警察官による17歳のラカン・マクドナルドの銃撃の失敗した取り扱いに続いて、市の警視官、ギャリーF.マッカーシーを解雇しました。

ダグ・マローネの理想的な食事は、ボローニャのサンドイッチです。

ダグ・マローネの理想的な食事は、ボローニャのサンドイッチです。

写真:ローガンボウルズ/ゲッティイメージズジャイアンツがベンマカドゥーを解雇したので、他の誰かがジムトムスラの精神的後継者でなければなりません。季節だった。ジャガーズのダグ・マローネ監督は、孤独なボローニャサンドイッチに親しみを持っていることを考えると、すでにその役割を担う有力な候補者のようです。

人々がやめる最も一般的な時間、およびプッシュスルーする方法

人々がやめる最も一般的な時間、およびプッシュスルーする方法

時には、それが副次的なプロジェクト、仕事、人間関係、または人生の他の部分であるかどうかにかかわらず、辞めることが最良の選択肢です。しかし、何かを完了するためのリソースがないため、物事が困難になったとき、タイミングが私たちに必要なように「感じ」させたときにも、私たちは辞めます。

黒人女性、あなたの内訳へようこそ

黒人女性、あなたの内訳へようこそ

著者のベニルデ・リトルは、母親の死後のうつ病との戦いを新しい回想録「Welcome toMyBreakdown」で記録しています。チェスター・トイの作家ベニルデ・リトルは、黒人女性にそれが大丈夫だと知ってもらいたいと思っています。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language