Что делает три точки в ReactJS

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

Что означает «{… x}» этот код?

Это синтаксис оператора распространения в реакции.

Из MDN DOCS :

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

В вашем случае Это означает, что отправляет весь объект или свойства, содержащиеся в x поскольку он выглядит как реквизиты Person Component

Например, если

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

Затем, если вы выполните

Вышеуказанное будет эквивалентно

  

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

Рассмотрим случай, когда вы передаете реквизиты компоненту, подобному

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

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

   

Затем prop name='xyz' перезаписывается парой ключ: значение, разрешенное из данных. Таким образом, окончательный вызов компонента Person будет выглядеть так:

   

Однако, когда вы пишете это как

   

Тогда name='abc' prop name='abc' , которое разрешено из данных, перезаписывается name='xyz' , которое явно передается Person . Таким образом, окончательный вызов компонента Person будет выглядеть так:

   

Это оператор распространения. Он был введен в ES2015. Он принимает все свойства x и распределяет их по элементу.

{...x} означает, что все свойства назначены объекту x, затем назначьте их

Вы можете прочитать больше здесь:

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

  • Что такое использование Curly Braces в заявлении импорта ES6
  • Одностраничное приложение и токен CSRF
  • Как указать порт для запуска проекта, основанного на создании приложения-приложения?
  • Каков наилучший способ запуска события onchange в реакции js
  • Динамически импортировать изображения из каталога с помощью webpack
  • Как включить / выключить режим разработки ReactJS '?
  • Программно перемещаться с помощью реактивного маршрутизатора V4
  • Как сделать setState внутри обратного вызова: ReactJS
  • ReactJs CreateClass не является функцией
  • Невозможно использовать функции Arrow внутри classа реагирующих компонентов
  • reactjs - Пользовательские компоненты JSX Не рендеринг
  • Давайте будем гением компьютера.