Как сократить передачу пропсов в компонент?

Question

[Alex Mirgorodskiy]

Всем привет, только начинаю осваивать реакт. Любитель рефакторить код. Не подскажете как можно сократить подобную запись?

function MyComponentItem({items}) {
      return (...)
   }
   function MyComponent({items}) {
       return (<div> 
         { <MyComponentItem items={items}  /> }
       </div>)
   }

Конкретно не нравится
<MyComponentItem items={items} />

Можно как то типа
<MyComponentItem {items} />
или
<MyComponentItem {{items}} />
ну или что-то похожее в духе деструктуризации. Не подскажите?

Answer 1

[Alex Mirgorodskiy]

В итоге пришел к такому, удобно если пропсов больше одного. Но я так понимаю лишняя операция происходит, создание объекта и его деструктуризация, не тестил как это на перфоменс влияет

function MyComponentItem({items, settings, itemWidth}) {}

    <MyComponentItem {...{items, settings, itemWidth}}  />

Comments

[twolegs]

Или даже

const OuterComponent = ({...rest }) => (
  <InnerComponent {...rest} />
);

Но это я бы рекомендовал делать с типизированным js, чтобы не было неожиданных ошибок.

[Alex Mirgorodskiy]

twolegs, наверное не достаточно точно изъяснился, rest прокинет все пропсы, а мне бы только те которые я захочу передать, например вот тут такое уже не пройдет

let {one, two, three} = state,
     item = <Item {...{one, two}} />

[twolegs]

Alex Mirgorodskiy, правда такое может показаться неочевидным

let { three, ...rest } = state,
     item = <Item {...rest} />

[Alex Mirgorodskiy]

twolegs, ну да, не слишком прозрачно, но тоже рабочий вариант, спасибо)

Answer 2

[Kirillsp1982]

Привет! Попробуй так, должно работать:<MyComponentItem {...items} />
P.S. Кстати, это передаст все элементы объекта items из пропса.