Нужно ли дублировать передачу пропсов в родительком компоненте?

Question

[Артур]

Есть компонент Tabs(принемает 4 пропса).
В котором отображаются несколько компонентов Tab (принемает 5 пропсов).
В свою очередь в компоненте Tab есть компонент Tooltip(принемает 3 пропса).

Я создаю отдельный компонент для страницы UsersTabs,
который инкапсулирует в себе данные и отрисовывает Tabs.

Впорос.
Должен ли UsersTabs компонент приинимать все те свойства что принемают Tooltip, Tab, Tabs? (12 пропсов) или я что-то делаю не так?

Нормально ли (хорошо ли?) передавать 1 пропс в виде массива объектов со всеми свойствами внутренних компонентов и разбрасывать их внутри UsersTabs?
Например

tabs={
[
  {
    'tabName': 'tab1',
    'tooltipText': 'this is tab1',
    'onTabClick': () => func(),
  },
  {
    'tabName': 'tab2',
    'tooltipText': 'this is tab2',
    'onTabClick': () => func(),
  }
]}

Answer 1

[Julia Ovod]

Попробую вам помочь. Если у вас вкладок немного, то чтобы не городить 12 пропсов, можно использовать такой подход:

const UserTabs = () => (
  <Tabs>
    <Tab
      name={name}
      tooltipText={tooltipText}
      onTabClick={onTabClick}
    />
    <Tab
      name={name}
      tooltipText={tooltipText}
      onTabClick={onTabClick}
    />
  </Tabs>
);

По возможности постарайтесь инкаспулировать данные внутри UserTabs и попробуйте решить проблему через композицию.

Если не получится (например, вкладок много или вы заранее не знаете данных), то можно так (то есть как вы и сказали передать массив tabs и с помощью итерации создать компонеты Tabs внутри UserTabs):

const createTabs = (tab) => tabs.map((tab) => {
  <Tab
    name={tab.name}
    tooltipText={tab.tooltipText}
    onTabClick={tab.onTabClick}
  />
});

const UserTabs = ({ tabs }) => <Tabs tabs={createTabs(tabs)} />;

Подробнее о композиции можно почитать в документации.

Comments

[Артур]

Спасибо!

Возникает вопрос, если табы передаются как children в компонент tabs, то как в компоненте tabs определять какой children делать активным?

Сейчас я использую подход в котором пребираю children в tabs и дописываю дополнительный props active одному из детей (Tab), корректно ли так делать? или нет?
При редактировании child в tabs, приходится переписывать onClick в child, на такой

onClick = () => {
  child.onClick()
  setActiveTab(childName)
}

поскольку в табе может быть свой онклик, и внутри tabs есть логика для установки активного таба

[Julia Ovod]

Если у вас Tabs являются ссылками, то тогда используйте внутри них компонент NavLink из React Router, для этого компонента на active можно указать свой класс, например, если используете styled-components:

const Link = styled(NavLink)`
  color: black;

  &.active {
    color: red;
  }
`;

Если у вас обычные переключатели, то можно сохранять в state компонента выше и прокидывать пропс, например, activeTabName дочерним компонентам и у каждой вкладки делать проверку, тогда пример будет выглядеть как-то так:

const UserTabs = () => {
  const [activeTabName, setActiveTabName] = userState('index');
  
  return (
    <Tabs>
      <Tab
        name={name}
        tooltipText={tooltipText}
        onTabClick={ (name) => setActiveTabName(name)}
      />
      <Tab
        name={name}
        tooltipText={tooltipText}
        onTabClick={ (name) => setActiveTabName(name)}
      />
    </Tabs>
  );
};