1293

この React (JSX を使用) コードで何をしてい...て、何と呼ばれていますか?

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

20 に答える 20

471

...これらはスプレッド属性と呼ばれ、その名前が示すように、式を展開できます。

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} />

要するに、それはきちんとしたショートカットだと言えます。

于 2017-01-13T17:49:37.353 に答える
299

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) {

  }
于 2018-06-06T20:28:58.170 に答える
19

3 つのドット...はスプレッド オペレータまたはレスト パラメータを表します。

これにより、配列式または文字列、または反復可能なものを、関数呼び出しのゼロ個以上の引数または配列の要素が期待される場所で展開できます。

  • 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]

注: Spread 構文は、配列をコピーする際に効果的に 1 レベル深くなります。そのため、次の例のように多次元配列のコピーには不向きかもしれません (Object.assign() やスプレッド構文も同様です)。

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

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 のプロパティが obj2 プロパティによって上書きされていることに注意してくださいfoo。

  • 不特定数の引数を配列として表すことができる残りのパラメーター構文として:

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

注: スプレッド構文 (スプレッド プロパティの場合を除く) は、反復可能なオブジェクトにのみ適用できます。

したがって、次の場合はエラーがスローされます。

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

参照1

参照2

于 2019-03-03T12:40:13.187 に答える
8

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

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

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

参考文献:

  1. スプレッド プロパティ

  2. JSXの詳細

于 2016-09-24T13:28:24.853 に答える