Как работает spread в JSX react?

Question

[AlkorIV]

Возникли сложности в понимании, как работает spread оператор, когда мы передаем props в react элемент, вот что я имею ввиду
у нас есть

<Modal name={props.name} age={props.age} />
//Эквивалентно 
<Modal {...props} />

Эта особенность характерна только для react? Я упускаю какой-то момент, если в es6 spread разворачивает массив в аргументы, то тут он разворачивает объект, в конструкцию name = props.name.

Comments

[Aves]

https://developer.mozilla.org/ru/docs/Web/JavaScri...

[AlkorIV]

Aves, спасибо за ссылку, буду изучать)

[AlkorIV]

Ребят вот еще немного инфы нашел, https://gist.github.com/sebmarkbage/07bbe37bc42b6d... может пригодиться для кого.

Answer 1

[MasterMike]

Добрый день!

"es6 spread разворачивает массив в аргументы"
Объект. Массив - частный случай объекта )

Очень сложно объяснить проще тех слов, которые вы и сами написали )
props - это объект.

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

const { name, age } = this.props;
<Modal age={age} name={name}>

А можете прокинуть все свойства объекта props сразу и целиком )
То есть по сути вы просто передаете весь объект props нижеследующему компоненту.

Если вы, например, напишете так
<Modal props={props}> то вы же в Modal получите эти пропсы, верно?
А так <Modal {...props} /> вы просто делаете деструктуризацию в момент передачи (надеюсь, так будет проще для понимания)).

Comments

[AlkorIV]

Спасибо огромное! У меня в голове начало проясняться, что к чему. Теперь картина видна более четко)