@AlkorIV

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

Возникли сложности в понимании, как работает spread оператор, когда мы передаем props в react элемент, вот что я имею ввиду
у нас есть
<Modal name={props.name} age={props.age} />
//Эквивалентно 
<Modal {...props} />


Эта особенность характерна только для react? Я упускаю какой-то момент, если в es6 spread разворачивает массив в аргументы, то тут он разворачивает объект, в конструкцию name = props.name.
  • Вопрос задан
  • 1887 просмотров
Решения вопроса 1
@MasterMike
Добрый день!

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

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

Вы его прокидываете в нижеследующий компонент.
Вы можете делать это поименно, как сделано в вашем примере, можете сделать сначала деструктуризацию
const { name, age } = this.props;
<Modal age={age} name={name}>


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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы