如何最好地创建选项卡式内容组件、文件夹、方法结构

Question

我正在尝试构建一个选项卡式内容组件，但不确定如何最好地进行此操作。

我有一个对象数组，如下所示，可以接受任意数量

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

我有一种感觉，我需要首先专注于显示tab.title，然后在otherComponents中显示tab.contents。但不确定我如何将两者链接在一起以识别活动选项卡以及要显示哪些内容。在此组件的文件夹结构中的任何帮助以及需要什么样的功能将不胜感激，因为我我不确定最好的方法。您建议首先关注什么？

我猜是下面的函数：getTabHeaders 和getTabContents，然后将它们显示在彼此下方？

我在下面有以下文件夹结构

-选项卡式内容 -tabbed-content.js -tab-content.js -标签页眉

不确定它们是否应该全部进入主文件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. 从标签属性创建标签
3. 处理点击逻辑
4. 是的，您可以使用样式组件

对于这个例子，我不会使用 react Refs，我会使用 .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;
`}