如何构建Tabs组件Reactjs

Question

[我正在尝试使用ReactJS构建Tabs组件，并且遵循CSS样式表。因此，我希望将其作为render：

<div data-container="" class="tabs tabs-horizontal">
    <div class="tabs-header">
        <div class="tabs-header-tab ph active" data-tab="0" style="transform: translateX(0px) translateZ(0px);">Personal
        </div>
        <div class="tabs-header-tab ph undefined" data-tab="0" style="transform: translateX(0px) translateZ(0px);">Job
        </div>
        <div class="tabs-header-tab ph undefined" data-tab="0" style="transform: translateX(0px) translateZ(0px);">
            Salary</div>
    </div>
    <div data-container="" class="tabs-content">
        <div data-container="" class="tabs-content-tab open" data-tab="0">
            <div>I am a HR Specialist.</div>
        </div>
        <div data-container="" class="tabs-content-tab undefined" data-tab="0">
            <div>No records have been added yet</div>
        </div>
        <div data-container="" class="tabs-content-tab undefined" data-tab="0">
            <div>This type of information needs to be added by your manager</div>
        </div>
    </div>
</div>

这就是组件现在的样子：

<Tabs>
  <TabHeaders>
    <TabHeadersItem text="Personal" state="active" />
    <TabHeadersItem text="Job" />
    <TabHeadersItem text="Salary" />
  </TabHeaders>
  <TabContents>
    <TabContentsItem
      content="I am a HR Specialist."
      open="open"
    />
    <TabContentsItem content="No records have been added yet" />
    <TabContentsItem content="This type of information needs to be added by your manager" />
  </TabContents>
</Tabs>

因此，我正在尝试找到一种解决方案，当用户单击标题时，标题变为“活动”，其内容为“打开”，而其他标题应关闭而不处于活动状态。

Answer 1

好吧，既然您已经编辑了问题，那么我来解决。想法是相同的：要保持打开哪个选项卡的状态，并且由于您不想将选项卡保留在列表中，则需要将TabHeader链接到TabContent：