it-roy-ru.com

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

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

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

Это нотация распространения собственности . Он был добавлен в ES2018, но долгое время поддерживался в проектах 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;
}

685
T.J. Crowder

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

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

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

229
Mehdi Raash

Три точки в JavaScript - это оператор spread/rest

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

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

myFunction(...iterableObj);

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

[...Array(10)]

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

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

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

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

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

33
Tomas Nikodym

Три точки представляют оператор распространения в 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. Аргументы функции в виде массива

     function fun1(...params) { 
    
     }  
    

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

  1. Расчесывать два объекта

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

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

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

Этот способ хорош, если у нас есть максимум 3 параметра, но что если нам нужно добавить, например, 110 параметров. Должны ли мы определить их все и добавить их по одному?! Конечно, есть более простой способ, который называется 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
24
Negin

Это просто определяет реквизиты по-другому вJSXдля вас! 

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

Так что в вашем случае код должен выглядеть примерно так:

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 ошибки заканчиваются загадочным следом стека.

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

Распространение атрибутов
Теперь вы можете использовать новую функцию 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 для свойств покоя и распространения объекта. Мы использовать в своих интересах эти поддерживаемые и развивающиеся стандарты в порядке обеспечить более чистый синтаксис в JSX.

11
Alireza

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

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

11
Andre Miras

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

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

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

они могут быть переданы следующим образом ребенку,

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

что похоже на это

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

но способ чище.

8
daniel maina

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

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

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
Ramesh Kumar Thiyagarajan

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

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

  • Объединить два массива
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 эффективно копируется на один уровень при копировании массива. Следовательно, это может быть непригодно для копирования многомерных массивов, как показано в следующем примере (то же самое с 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

  • Синтаксис параметра rest, который позволяет нам представлять неопределенное количество аргументов в виде массива:
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

Reference1

Reference2

2
Code_Mode

Короче говоря, три точки ... это оператор распространения в ES6 (ES2015). оператор распространения будет получать все данные.

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
Sikindar Mirza

Обычно называется оператором распространения, он используется для расширения везде, где требуется

пример 

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

вы можете использовать это там, где вам когда-либо потребуется Подробнее об операторе распространения https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

1
keerthi c

Он называется оператором распространения . Например, Let hello = {name: '', msg: ''} Let hello1 = {... hello} Теперь свойства объекта hello копируются в hello1 ,.

0
Kaushal Regmi

Обычная практика - передавать информацию в приложении 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';

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

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

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

0
esewalson

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

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

Твиттер Дана Абрамова об операторе распространения (создатель Redux) https://Twitter.com/dan_abramov/status/694519379191545856?lang=en

0
Gopinath Kaliappan

Значение ... зависит от того, где вы используете его в коде,

  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] 
0
Hetal Rachh