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

Question

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

我有一个 object 数组，如下所示，它可以容纳任何数字

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

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

我会猜测以下功能：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 中有一些与上面类似的东西，但不确定如何 link 他们两个在一起......这让我觉得我正在走下坡路错误的路径...这就是为什么我要一个文件夹 structure/method 结构或一个关于首先要做什么来解决问题的计划

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 组件会处理剩下的事情：

正在解析children
从标签属性
处理点击逻辑
是的，你可以使用 styled-components

对于这个例子，我不会使用 React Refs，我会使用 .bind 来做 hacky 的方式。 SO PLEASE，你应该自己解决这个问题；）这只是为了把你推向正确的方向。如果你的版本没有 .bind 你可以更新我的 post :)

您的 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 的渲染方法应该return如下：

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 styled-component 应该为属性 active:

实现一个行为

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

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

How best to create tabbed content component, folder, method structure

javascript

components

reactjs

styled-components