Почему параметр компонента указан в фигурных скобках?

Question

[Станислав Смолянко]

Привет!
Есть React компонент, который возвращает разметку. Он принимает аргументом объект, из которого будут взяты ключи name и code и подставлены в другие компоненты

function ProductPage({ product }) {
  return (
    <section>
      <Title>{product.name}</Title>
      <Code>{product.code}</Code>
    </section>
  )};

Вопрос - почему параметр заключен в фигурные скобки?

Вызывается этот компонент из index.js вот таким образом:

import ReactDOM from "react-dom";
import { product } from "./moke";

import ProductPage from "./product-page";

const rootElement = document.getElementById("root");
ReactDOM.render(<ProductPage product={product} />, rootElement);

И тут второй вопрос, аналогичный, почему product подставляется так же в фигурных скобках? Почему не "product"?

Заранее спасибо за ответ!

Answer 1

[TjLink]

({product}) - это называется деструктуризация.
Ведь компонент принимает props.

const Component = (props) => {
 return (
  <div>{props.product}</div>
 )
}

А когда ты пишешь вот так: ( { product } ), то ты просто разворачиваешь props, достаёшь оттуда значение product
И вместо того, чтобы писать props.product, ты будешь писать просто product, так как ты уже раскрыл его.
Главное, что имя совпадало с именем пропса.
Деструктуризация почитай.

Comments

[Станислав Смолянко]

Спасибо! То есть по сути напрямую передать в компонент мы ничего не можем, как в обычных функциях JS? Только через props?

[TjLink]

Станислав Смолянко,

Когда ты хочешь отрендерить компонент то делаешь вот так:
<Component />

И чтобы передать в дочерний компонент данные, то ты передаёшь пропсы:

<Component users={users} title="Список пользователей" ... />

Всё что ты написал: user, title и так далее будут находиться в props.

props = {
   users: [] - массив юзеров,
   title; 'Список пользователей',
}

Напрямую? То есть не прокидывать через всё дерево компонентов?

[Станислав Смолянко]

TjLink, вроде понял, спасибо!