Что делают эти три точки в React?

avatar
Thomas Johansen
25 июня 2015 в 11:21
463785
20
1259

Что делает ... в этом коде React (с использованием JSX) и как он называется?

<Modal {...this.props} title='Modal heading' animation={false}>
Источник
doub1ejack
8 декабря 2018 в 16:02
16

ПРИМЕЧАНИЕ: оператор ... ведет себя по-разному в разных контекстах. В данном контексте это оператор «распространения», описанный ниже @ T.J. Краудер. В другом контексте это также может быть оператор "отдыха", описанный ниже @Tomas Nikodym.

S.Alvi
3 марта 2021 в 10:50
0

... разрушает массив this.props на отдельные значения

Ответы (20)

avatar
T.J. Crowder
25 июня 2015 в 11:25
1412

Это нотация распределения свойств . Он был добавлен в 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>

Нотация распространения удобна не только для этого варианта использования, но и для создания нового объекта с большей частью (или всеми) свойствами существующего объекта, что часто возникает при обновлении состояния, поскольку вы можете ' t изменить состояние напрямую:

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;
}
Snackoverflow
6 февраля 2019 в 12:01
1

Помещение дочернего элемента между открывающим и закрывающим тегами переопределяет свойство children или они объединены?

T.J. Crowder
6 февраля 2019 в 15:47
4

@anddero - Это очень интересный вопрос. Насколько я понимаю, это не охвачено [документацией из children. Эксперименты говорят мне, что дочерние элементы, которые вы предоставляете через атрибут с именем children, заменяются теми, которые вы указываете между начальным и конечным тегами, но если это поведение undefined, я бы не стал на него полагаться.

avatar
Shubham Garg
25 февраля 2022 в 02:27
3

они называются атрибутом распространения, который был добавлен в ES2018, позже в JSX и так далее в ReactJs. Этот оператор подразумевает уточнение или расширение всех свойств, содержащихся в переменной, здесь ({...this.props}).

Например:

var person={ имя: "Халк", возраст: 22 };

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

будет таким же, как

<Modal name={person.name} age={person.age} title='Modal heading' animation={false} />
avatar
Paras Buda
2 января 2022 в 06:15
-1

Синтаксис расширения позволяет деструктурировать структуры данных, такие как массив и объект. их либо для извлечения из них значения, либо для добавления к ним значения. например const obj={name:"ram",age:10} const {name}=obj из приведенного выше примера мы можем сказать, что мы деструктурировали объект и извлекли имя из этого объекта. по аналогии, const newObj={...obj,address:"Nepal"} из этого примера мы добавили новое свойство к этому объекту. То же самое и в случае с массивом.

avatar
Abhishek3301
27 декабря 2021 в 12:58
0

Оператор Spread позволяет расширять итерируемый объект, например объект, строку или массив, на его элементы, в то время как оператор Rest выполняет обратное, сокращая набор элементов в один массив.

avatar
Supun Praneeth
27 октября 2020 в 07:12
19

Для тех, кто хочет понять это просто и быстро:

Во-первых, это синтаксис не только для React. Это синтаксис из 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, он принимал атрибут тега как атрибуты объекта, которые объединяются (заменяют, если он существует) с данным объектом user. Кроме того, вы могли заметить одну вещь: он заменяет только атрибуты до, а не после атрибутов. Итак, в этом примере возраст остается прежним.

Don Cheadle
2 ноября 2020 в 20:39
0

не должен возраст = 50 в конце?

Supun Praneeth
4 ноября 2020 в 09:30
5

@DonCheadle нет, потому что я добавил {...user} до возраста, поэтому тег возраста не заменит

avatar
Keet Sugathadasa
8 мая 2020 в 16:51
47

... (три точки в JavaScript) называется синтаксисом распространения или оператором распространения. Это позволяет развернуть итерацию, такую ​​как массив , выражение или строку , или выражение объекта , где бы оно ни находилось. Это не относится к React. Это оператор JavaScript.

Все эти ответы здесь полезны, но я хочу перечислить наиболее часто используемые практические варианты использования синтаксиса распространения (оператор распространения).

1. Объединить массивы (объединить массивы)

Существует множество способов объединения массивов, но оператор распространения позволяет вам разместить это в любом месте массива. Если вы хотите объединить два массива и разместить элементы в любой точке массива, вы можете сделать следующее:

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

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

2. Копирование массивов

Когда нам нужна была копия массива, мы использовали метод Array.prototypr.slice (). Но вы можете сделать то же самое с оператором распространения.

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

3. Вызов функций без Apply

В ES5, чтобы передать массив из двух чисел в функцию doStuff(), вы часто используете метод Function.prototype.apply () следующим образом:

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

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

Однако, используя оператор распространения, вы можете передать массив в функцию.

doStuff(...args);

4. Разрушение массивов

Вы можете использовать деструктуризацию и оператор 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 также имеет три точки (...), которые являются параметром отдыха, который собирает все оставшиеся аргументы функции в массив.

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

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

6. Использование математических функций

Любая функция, в которой в качестве аргумента используется распространение, может использоваться функциями, которые могут принимать любое количество аргументов.

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

7. Объединение двух объектов

Вы можете использовать оператор распространения, чтобы объединить два объекта. Это простой и понятный способ сделать это.

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

Вы можете придумать и другие способы использования оператора распространения. Я перечислил наиболее популярные варианты его использования.

avatar
curiousBoy
24 января 2020 в 22:44
27

Слава Брэндону Морелли. Он прекрасно объяснил здесь, но ссылки могут исчезнуть, поэтому я просто вставляю содержимое ниже:

Синтаксис расширения состоит из трех точек: ... Это позволяет итерируемому расширяться в местах, где ожидается 0+ аргументов. Определения без контекста трудны. Давайте рассмотрим несколько различных вариантов использования, чтобы понять, что это означает.

Пример 1 - Вставка массивов

Взгляните на приведенный ниже код. В этом коде мы не используем синтаксис распространения:

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

console.log(arr);

Выше мы создали массив с именем mid. Затем мы создаем второй массив, который содержит наш массив mid. Наконец, выводим результат. Что вы ожидаете от arr для печати? Нажмите «Выполнить» выше, чтобы увидеть, что произойдет. Вот результат:

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

Это тот результат, которого вы ожидали?

Вставив массив mid в массив arr, мы получили массив внутри массива. Ничего страшного, если это была цель. Но что, если вам нужен только один массив со значениями от 1 до 6? Для этого мы можем использовать синтаксис распространения! Помните, что синтаксис распространения позволяет элементам нашего массива расширяться.

Давайте посмотрим на приведенный ниже код. Все то же самое, за исключением того, что теперь мы используем синтаксис распространения для вставки массива mid в массив arr:

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

console.log(arr);

И когда вы нажимаете кнопку запуска, вот результат:

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

Отлично!

Помните определение синтаксиса распространения, которое вы только что прочитали выше? Вот где это пригодится. Как видите, когда мы создаем массив arr и используем оператор распространения в массиве mid, вместо того, чтобы просто вставлять его, массив mid расширяется. Это расширение означает, что каждый элемент массива mid вставляется в массив arr. Вместо вложенных массивов результатом будет один массив чисел от 1 до 6.

Пример 2 - Математика

JavaScript имеет встроенный математический объект, который позволяет нам выполнять некоторые забавные математические вычисления. В этом примере мы будем смотреть на Math.max(). Если вы не знакомы, Math.max() возвращает наибольшее из нуля или более чисел. Вот несколько примеров:

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

Это работает, это просто очень раздражает.

Теперь посмотрим, как мы делаем то же самое с синтаксисом распространения:

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

console.log(max);

Вместо того, чтобы создавать функцию и использовать метод apply для возврата результата Math.max(), нам нужны только две строки кода! Синтаксис распространения расширяет элементы нашего массива и вводит каждый элемент в нашем массиве индивидуально в метод Math.max()!

Пример 3 - Копирование массива

В JavaScript нельзя просто скопировать массив, установив новую переменную, равную уже существующему массиву. Рассмотрим следующий пример кода:

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

console.log(arr2);

Когда вы нажмете кнопку "Выполнить", вы получите следующий результат:

['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);

Нажмите "Выполнить", и вы увидите ожидаемый результат:

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

Выше значения массива в arr расширены, чтобы стать отдельными элементами, которые затем были присвоены arr2. Теперь мы можем изменять массив arr2 сколько угодно, без последствий для исходного массива arr:

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

arr2.push('d');

console.log(arr);

Опять же, причина, по которой это работает, заключается в том, что значение arr расширено, чтобы заполнить скобки нашего определения массива arr2. Таким образом, мы устанавливаем arr2 равным отдельным значениям arr вместо ссылки на arr, как в первом примере.

Пример бонуса - строка в массив

В качестве забавного последнего примера вы можете использовать синтаксис распространения для преобразования строки в массив. Просто используйте синтаксис распространения в квадратных скобках:

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

console.log(chars);
avatar
raheel shahzad
1 января 2020 в 16:02
1

Оператор распространения (тройной оператор), представленный в ECMAScript 6 (ES6). ECMAScript (ES6) - это оболочка JavaScript.

Перечислимые свойства оператора распространения в реквизитах.

this.props = { firstName: 'Дэн', lastName: 'Абрамов', город: 'Нью-Йорк', страна: 'США' } <Модальный {... this.props} title = 'Модальный заголовок' animation = {false}>

{... this.props} = {firstName: 'Dan', lastName: 'Абрамов', город: 'Нью-Йорк', страна: "США"}

Но основной оператор распространения признаков используется для ссылочного типа.

Например,

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

person1.name = "Raheel";

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

Это называется ссылочным типом. Один объект влияет на другие объекты, потому что они совместно используются в памяти. Если вы получаете значение независимо, это означает, что в обоих случаях используется оператор распространения.

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

person2.name = "Shahzad";

console.log(person.name); // Output: Alex
avatar
Vikas Yadav
3 марта 2019 в 12:40
19

Три точки ... представляют операторы распространения или остальные параметры.

Он позволяет развернуть выражение массива или строку или что-либо еще, что может быть итерацией в местах, где ожидается ноль или более аргументов для вызовов функций или элементов для массива.

  • Объединить два массива

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]

Примечание: синтаксис расширения эффективно расширяется на один уровень при копировании множество. Поэтому он может не подходить для копирования многомерных массивы, как показано в следующем примере (то же самое с Object.assign () и синтаксис распространения).

  • Добавить значения одного массива в другой по определенному индексу, например, 3:

var arr1 = [4, 5]
var arr2 = [1, 2, 3, ...arr1, 6]
console.log(arr2);    // [1, 2, 3, 4, 5, 6]
  • При вызове конструктора с новым:

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}

Обратите внимание, что свойство foo obj1 было перезаписано свойством 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

kta
10 сентября 2020 в 06:04
1

Ваш первый пример слияния двух массивов с использованием тройной точки был очень полезным. Спасибо.

avatar
esewalson
25 сентября 2018 в 18:43
1

Обычная практика - передавать props в приложении React. При этом мы можем применять изменения состояния к дочернему компоненту независимо от того, является ли он чистым или нечистым (без состояния или с сохранением состояния). Бывают случаи, когда лучший подход при передаче props - это передать отдельные свойства или весь объект свойств. Благодаря поддержке массивов в 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 spread или 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';

Или объедините два разных объекта следующим образом (это еще не доступно во всех версиях реакции):

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

Другой способ объяснить это, согласно сайту реакции / документации Facebook:

Если у вас уже есть «props» в качестве объекта и вы хотите передать его в JSX, вы можете использовать «...» в качестве оператора SPREAD для передачи всего объекта props. Следующие два примера эквивалентны:

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



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

Атрибуты распространения могут быть полезны при создании универсальных контейнеров. Однако они также могут сделать ваш код беспорядочным, упростив передачу большого количества нерелевантных свойств компонентам, которым они не важны. Этот синтаксис следует использовать с осторожностью.

Peter Mortensen
15 марта 2021 в 22:24
0

Буквально ли "чистый" и "нечистый"? Для акцента эта платформа выделена курсивом и жирным шрифтом.

avatar
Nontachai
20 сентября 2018 в 02:53
1

В 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.

Ссылка: Spread синтаксис

avatar
theTypan
6 июня 2018 в 20:28
287

Три точки представляют собой оператор распространения в 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. Объединение двух объектов

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

Есть еще одно применение трех точек, известное как Остальные параметры , которое позволяет принимать все аргументы функции как один массив.

  1. Аргументы функции в виде массива

      function fun1(...params) {
    
      }
    
the chad
17 июля 2018 в 16:47
63

Это отличный ответ, поскольку есть все наглядные примеры для каждого варианта использования. Спасибо, что нашли время написать все это.

j obe
28 марта 2019 в 11:29
2

Упомяните параметры отдыха перед примером для большей ясности.

Andaç Temel
22 февраля 2020 в 16:51
3

не только лучший ответ, но и самый смешной: «Селана Мари, твоя первая любовь: D»

John McGovern
30 июня 2020 в 20:24
0

Контекст его примера - только преобразование json, а не преобразование массива.

Andy
9 октября 2020 в 02:49
1

3.5. Разрушение объекта

Federico Baù
9 декабря 2020 в 18:57
3

Это потрясающий ответ, и как разработчик Python я могу перевести оператор распространения в упаковку / распаковку с помощью обозначений * или **, в основном делает то же самое.

Wasbeer
24 августа 2021 в 13:04
0

Относительно пункта 4: зачем использовать остальные параметры вместо объекта аргументов, который доступен в функциях JavaScript?

Koray Tugay
2 октября 2021 в 01:03
0

@Wasbeer developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

avatar
pickup limes
22 декабря 2017 в 16:04
16

... (оператор распространения) используется в React to:

обеспечивает удобный способ передачи свойств от родительских компонентов к дочерним. Например. учитывая эти свойства в родительском компоненте,

this.props = {
  username: "danM",
  email: "dan@mail.com"
}

их можно передать ребенку следующим образом:

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

, который похож на этот

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

но намного чище.

vijay kiran reddy
12 октября 2020 в 03:49
0

предположим, если мы хотим передать дочернему компоненту только свойство username, то можем ли мы использовать <ChildComponent {... this.props.username} />?

vijay kiran reddy
12 октября 2020 в 08:47
0

почему он просит меня использовать оператор распространения перед этим ключевым словом в теге h1? class Test {obj = {user1: "vijay", age: 27}; m1 () {<h1 {this.obj.user}> </h1>; }}

vijay kiran reddy
12 октября 2020 в 09:07
0

// ex-2: в этом примере не возникает ошибка при использовании оператора распространения, когда я использую тег img. class Test {obj = {user1: "vijay", imageUrl: "picsum.photos/id/1/200/300"}; m1 () {// <h1 {this.obj.user1}> </h1>; <img src = {this.obj.imageUrl} />; }}

avatar
nichery
10 июля 2017 в 08:45
-3

Это называется спредом. Как следует из названия, это означает, что он помещает любое его значение в этот массив или объекты.

Например:

let a = [1, 2, 3];
let b = [...a, 4, 5, 6];
console.log(b);
> [1, 2, 3, 4, 5, 6]
avatar
Alireza
27 мая 2017 в 06:06
24

Он просто определяет props по-другому в 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} />
}

Это цитаты команды React об операторе спреда в JSX:

Атрибуты распространения 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 ошибки заканчиваются загадочной трассировкой стека.

Реквизиты следует считать неизменяемыми. Мутация объекта props где-то еще может вызвать неожиданные последствия, поэтому в идеале быть застывшим объектом в этой точке.

Атрибуты распространения
Теперь вы можете использовать новую функцию 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. Есть также предложение ECMAScript для объектов Rest и Spread Properties. Были используя эти поддерживаемые и развивающиеся стандарты, чтобы чтобы обеспечить более чистый синтаксис в JSX.

John McGovern
30 июня 2020 в 20:27
3

Вы перестали отвечать на его вопрос.

Peter Mortensen
15 марта 2021 в 22:03
0

Что такое «реквизит»? "Характеристики"? Или буквально?

avatar
Andre Miras
15 мая 2017 в 08:27
18

Для тех, кто пришел из мира Python, атрибуты распространения JSX эквивалентны Распаковка списков аргументов (оператор Python **).

Я знаю, что это вопрос JSX, но работа с аналогиями иногда помогает получить его быстрее.

avatar
Negin
27 февраля 2017 в 12:52
41

Это особенность ES6, которая также используется в React. Посмотрите на пример ниже:

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

Этот способ подходит, если у нас есть максимум три параметра. Но что, если нам нужно добавить, например, 110 параметров. Следует ли нам определять их все и добавлять по одному?

Конечно, есть более простой способ сделать это, который называется спред . Вместо передачи всех этих параметров вы пишете:

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

avatar
Mehdi Raash
13 января 2017 в 17:49
457

... называются атрибутами распространения , которые, как видно из названия, позволяют расширять выражение.

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

Короче говоря, это аккуратный ярлык, , можно сказать .

John McGovern
30 июня 2020 в 20:17
1

var person = {name: 'Alex', age: 35} - это обозначение объекта json, javascript. ... человек оценивается как name = 'Alex', age = 35, и его цель состоит в том, чтобы сказать, что у вас есть 1000000 таких пар ключевых значений в структуре json, и вы хотите передать их все в компонент, все, что вам нужно сделать, это сделать обозначение ..., и все они пройдены. Необязательно перечислять их по очереди.

Mehdi Raash
7 июля 2020 в 09:47
1

Это не документация ECMA, не воспринимайте это слишком серьезно! Я сначала ответил на этот вопрос таким образом, и через некоторое время другие люди меняют свой ответ, чтобы он выглядел как мой, просто добившись некоторого голосования.

Andy
9 октября 2020 в 02:49
1

помогло бы добавить пример распространения объекта на другой объект, поскольку это, по сути, то, что JSX spread делает под капотом.

BMW
5 октября 2021 в 07:04
2

Лучший ответ, ясный и очевидный

Mehdi Raash
6 октября 2021 в 21:24
0

@BMW, я извлек урок из этого ответа, когда увидел, что другие скопировали мой ответ и добавили в свои, чтобы получить больше очков! Так работает общество даже вне Stackoverflow. люди просто ищут числа ...

avatar
Developer
24 сентября 2016 в 13:28
7

Три точки (...) называются оператором распространения, и он концептуально аналогичен оператору распространения массива ES6, JSX. использование преимуществ этих поддерживаемых и разрабатываемых стандартов для обеспечения более чистого синтаксиса в JSX

Свойства спреда в инициализаторах объекта копируют собственный перечисляемый объект свойства из предоставленного объекта во вновь созданный объект.

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

Ссылки:

  1. Свойства распространения

  2. Углубленный JSX

ivarni
24 сентября 2016 в 13:35
3

Это предложение для оператора распространения на объектах в ECMAScript. Речь шла об операторе распространения JSX. Они не такие, хотя работают одинаково.

Developer
24 сентября 2016 в 13:37
1

@ivarni Спасибо, что ввел меня в контекст, дайте мне минутку, обновлю ответ в зависимости от контекста вопроса

Developer
24 сентября 2016 в 13:46
0

@ivarni Обновите ответ в зависимости от контекста, надеюсь, он соответствует контексту

T.J. Crowder
28 сентября 2019 в 17:03
0

«Три точки (...) называются оператором распространения» Только неправильно. :-) Spread и rest - это не операторы, и они не могут быть такими, потому что оператор должен выдавать единственное значение результата. Распространение и отдых - это первичный синтаксис, а не операторы.

avatar
Tomas Nikodym
9 сентября 2016 в 14:04
78

Три точки в JavaScript - это оператор распространения / отдыха .

Оператор распространения

синтаксис распространения позволяет раскрывать выражение там, где ожидается несколько аргументов.

myFunction(...iterableObj);

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

[...Array(10)]

Остальные параметры

Синтаксис параметра rest используется для функций с переменным числом аргументов.

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

Оператор распространения / отдыха для массивов был введен в ES6. Есть предложение State 2 для свойств распространения / отдыха объекта.

TypeScript также поддерживает синтаксис распространения и может переносить его в более старые версии ECMAScript с незначительными проблемами.

SeanMC
4 января 2019 в 00:50
0

Спред / отдых теперь Stage4, завершен. Думаю, включен в ES9 / 2018 github.com/tc39/proposal-object-rest-spread/blob/master/…