Как лучше всего создать компонент содержимого с вкладками, папку, структуру метода

Question

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

У меня есть массив объектов, такой как ниже, который может принимать любое число

tabs= {[
  {
    "title": "Some title 1",
    "otherComponents": [
      <Title ... />,
      <Paragraph... />
    ]
  },
    ...
    ...
    ...
}]

У меня такое ощущение, что мне нужно сначала сосредоточиться на отображении tab.title, а затем отобразить вкладку.content в otherComponents.но не уверен в том, как связать их вместе, чтобы можно было идентифицировать активную вкладку и какое содержимое отображать. Любая помощь в структуре папок для этих компонентов и какая функция будет поставлена, будет принята с благодарностью, поскольку я 'Я не уверен в наилучшем подходе для этого.Что бы вы посоветовали вначале сосредоточиться?

Я бы предположил следующую функцию: getTabHeaders и getTabContents, а затем отобразил бы их друг под другом?

У меня есть следующая структура папок ниже

-tabbed-content -tabbed-content.js -tab-content.js -tab-headers

Не уверен, должны ли они все входить в основной файл tabbed-content.

в tabbed-content У меня есть что-то вроде следующего

  getTabbedContent() {
    const {
    tabs,
  } = this.props;

  const numberOfTabs = Object.keys(tabs).length;

  return (
    <StyledTabbedContent>
      { tabs.map((tab, index) => (
        <TabHeader
          key={uuidv1()}
          title={tab.title}
          tabNumber={1+ index}
          numberOfTabs={numberOfTabs}
        />
        ),
      )}
    </StyledTabbedContent>
  );
  }

в tab-header У меня есть следующее

  render() {
    const { numberOfTabs, title } = this.props;
    return (
      <StyledTab 
        numberOfTabs={numberOfTabs}
      >
          <StyledTitle>{title}</StyledTitle>
      </StyledTab>     
    ) 
  }
}

То, что я думал, было в tab-content что-то похожее на вышеупомянутое, но не уверен, что идентификатор удостоверения личности связывает их обоих вместе ... что заставляет меня думать, что я иду по неправильному пути ... Вот почему я прошу структуру структуры / метода папок илиплан того, что делать в первую очередь для решения проблемы

Answer 1

Я бы порекомендовал вам создать более общий компонент Tabbar.В вашем приложении вы можете сделать следующее:

<TabbedContent>
  <div label="Tab 1"> ... individual content goes here ... </div>
  <div label="Tab 2"> ... individual content goes here ... </div>
  <div label="Tab 3"> ... individual content goes here ... </div>
</TabbedContent>

Компонент TabbedContent позаботится об остальном:

1. синтаксический анализ дочерних элементов
2. создание вкладок изсвойство label
3. обработка логики клика
4. да, вы можете использовать styled-components

Для этого примера я не буду использовать реагирующий Рефс, и я сделаю хакерскийпуть с .bind.ТАК ПОЖАЛУЙСТА, вы должны исправить это самостоятельно;) Это просто, чтобы подтолкнуть вас в правильном направлении.Если у вас есть версия без .bind, вы можете обновить мой пост:)

Ваш компонент TabbedContent должен выглядеть следующим образом:

export default class TabbedContent extends Component {
  constructor(props) {
    super(props)

    // get the label from the first child
    const { children } = this.props
    const firstChild = children && children[0] 

    if (firstChild){
      // save active label in state
      const { label } = firstChild.props
      this.state = { activeTab: label }
    }

  }

}

Метод визуализации TabbedContent долженверните следующее:

const {
  onClickTabItem,
  props: { children },
  state: { activeTab },
} = this

return (
<Tabs>
  <TabList>
    {children.map((child) => {
      const { label } = child.props
      return (
        <Tab
          active={label === activeTab}
          key={label}
          onClick={onClickTabItem.bind(this, label)}
        >
          {label}
        </Tab>
      )
    })}
  </TabList>
  <TabContent>
    {children.map((child) => {
      if (child.props.label !== activeTab) return undefined
      return child.props.children
    })}
  </TabContent>
</Tabs>
)

Добавьте метод onClickTabItem к компоненту и установите состояние при каждом его вызове:

onClickTabItem = (tab) => {
  this.setState({ activeTab: tab })
}

Ваш Tab стиль-компонент должен реализовывать поведениеза недвижимость active:

${props => props.active && css`
  background: black;
  color: white;
`}