Я создаю компонент, который динамически генерирует вкладки, не могу понять, как передать заголовки, чтобы динамически именовать эти вкладки

Question

У меня есть компонент меню / панели навигации, который я создаю, который динамически генерирует вкладки для каждого из переданных в него дочерних компонентов.

Все работает правильно, единственная проблема, с которой я сейчас сталкиваюсь, это то, что я могу 'Не понимаю, как передать заголовки, чтобы также назвать вкладки.

Прямо сейчас я просто визуализирую Tab 1, Tab 2, etc., но я бы хотел передать заголовок для каждого дочернего компонента и отобразить вкладку это значение вместо этого выглядит следующим образом:

<Tabs>
  <div title={"Overview"}>
    <h1>This is the Overview tab</h1>
  </div>
  <div title={"About"}>
    <h1>This is the About tab</h1>
  </div>
</Tabs>

Это мой текущий компонент вкладок:

import React, { useState, useMemo } from 'react';
import styled from 'styled-components';

type Props = {
  children: React.ReactNode;
};

const Tabs = (props: Props) => {
  const { children } = props;
  const [tab, setTab] = useState(0);
  const childrenList = React.Children.toArray(children);

  const generateTabs = (amount: number) => {
    let list = [];

    // This is where I generate the tabs and name them
    for (let i = 0; i < amount; i++) {
      list.push(<StyledTabs onClick={() => setTab(i)}>Tab {i + 1}</StyledTabs>);
    }
    return list;
  };

  const current = useMemo(() => childrenList[tab], [tab]);
  const tabs = generateTabs(childrenList.length);

  return (
    <div>
      <div>{tabs}</div>
      <div>{current}</div>
    </div>
  );
};

export default Tabs;

const StyledTabs = styled.button`
  border: none;
  display: inline-block;
`;

И вот где он используется:

...
return (
        <Tabs>
          <div>
            <h1>THIS IS TAB 1</h1>
          </div>
          <div>
           <h1>AND HERE'S TAB 2</h1>
          </div>
        </Tabs>
)

Answer 1

Вы можете получить титул ребенка, используя: child.props.title. Получить дочернее свойство в React

  const tabs = childrenList.map((child,idx)=>{
    const title = (child as any).props.title ?? idx;
    return ( <StyledTabs key={title}  onClick={() => setTab(idx)}>{title}</StyledTabs>);
  })

Вот рабочая песочница для кода.

https://codesandbox.io/s/read-child-props-n5f8y?file= / src / Tabs.tsx

В качестве примечания, я избавился от useMemo, поскольку он, похоже, мало что делает и может вызывать отображение устаревших значений тока, потому что вы не использовали childrenList в массиве зависимостей ( что привело бы к повторному запуску каждого рендеринга).

Я также добавил ключ к вашим вкладкам, чтобы не дать реакции на это жаловаться.

Я тоже пошел дальше и просто включил вашу функцию generateTabs в одну карту, так как это немного понятнее, чем использование для l oop и массива pu sh.