Как правильно задать аргумент в компонент?

Question

[Boris007]

Есть компонент в tsx

import Box from '...'
const data = [...]

export default function BestWeddings() {
    return <>
        <section>
           {data.map(data => <Box props={data} />)}
         </section>
</>

Компонент

type tBox = {
    name: string;
    date: string;
    image: string;
}

export default function Box({ props }: tBox) {
   .....
}

Но получается так, что он ищет свойство props в tBox, а я не хочу странной вложенности объекта в объект в типе

Как правильно передавать работать с аргументом, когда мы передаем в него объект?

Answer 1

[Михаил]

1. Компонент Box, который принимает как props развернутый объект box:

type Box = {
  name: string;
  date: string;
  image: string;
};

// можно сразу указать что props будет иметь тип Box, но я так не привык делать
// всегда описываю тип Props для объекта props
type Props = Box;

export default function Box(props: Props) {
  const {name, date, image} = props;
}

И передавать в него данные нужно следующим образом:

{data.map((box) => (
  <Box
    name={box.name}
    date={box.date}
    image={box.image}
  />
))}

Или можно делать так, но это не везде принято делать, поскольку читаемость понижается (опять-таки все это условно, делай как считаешь нужным):

{data.map((box) => (
  // поля объекта box сразу стали полями props
  // и про key не забудь внутри цикла map
  <Box key={?} {...box} />
))}

2. Компонент Box, который принимает как props обычный объект, где box является вложенным объектом:

type Box = {
  name: string;
  date: string;
  image: string;
}

type  Props = {
  box: Box;
};

export default function Box(props: Props) {
  const {name, date, image} = props.box;
}

и передавать его можно таким способом:

{data.map((box) => (
  // объект box передается как props.box
  // и про key не забудь внутри цикла map
  <Box key={?} box={box} />
))}

В большинстве случаев лучше использовать первый вариант, поскольку так легче использовать React.memo (если его, конечно, нужно использовать).

Comments

[Boris007]

Спасибо!

Answer 2

[Zashamee]

type tBox = {
name: string;
date: string;
image: string;
}
export default function Box({ name, date, image}: tBox) {
.....
}

Comments

[Boris007]

А есть вариант не делать набор аргументов, а передавать только один, который будет объектом?

[Zashamee]

Boris007, зачем? все равно деструктурировать прейдится

[Zashamee]

Boris007, ну можешь конечно заморочиться в принципе можно

[Boris007]

Zashamee,
Находил только такие примеры, но нигде не смог найти с примером, когда передают объект, а не его свойства
Т.е. в случае с тайп скриптом все равно нужно расписывать все свойства в ручную?
Или как-то можно сделать используя только один аргумент, который и будет объект?

import React from 'react';

function App() {
  const greeting = 'Hello Function Component!';

  return <Headline value={greeting} />;
}

function Headline(props) {
  return <h1>{props.value}</h1>;
}

export default App;

Как пример, чтобы сюда передавать сразу аргумент
return <Headline value />;
Где value это объект, который будет относится к первому аргументу нашего компонента

[Zashamee]

Boris007, это JS(или просто абстрактный пример), а спрашиваеь про TS.

[Zashamee]

Boris007, в пропс тип ты можешь добавить еще один тип

[WbICHA]

Boris007,

Т.е. в случае с тайп скриптом все равно нужно расписывать все свойства в ручную?

Откровенно говоря, не очень понятно чего именно ты хочешь. Естественно всё свойства надо вручную прописать, а как иначе ты их определишь? Как ты им типы дашь?

Как пример, чтобы сюда передавать сразу аргумент
return <Headline value />;
Где value это объект, который будет относится к первому аргументу нашего компонента

В реакте такая запись шорткат для тру:
return <Headline value={true} />;
Поэтому очевидно, что по другому оно работать не будет.

[Zashamee]

Boris007,
type tBox = { // 'этот тип общий для всех пропсов его лучше назвать BoxProps
name: string; /// это пропсы - любые и объект и массив и т.д
date: string;
image: string;
}
export default function Box({ name, date, image}: tBox) {
.....
}