如何构建标签组件 Reactjs

Question

I'm trying to build a Tabs component with ReactJS and I'm following a CSS stylesheet.So, I would love to have this as 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>

And this is what the components looks like now :

<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>

So, I'm trying to find a solution, when user clicks on a header it becomes "active" and its content "open" while the others should be closed and not active.

Answer 1

Ok so since you've edited your question, I'll do with mine. The idea is the same: To keep the state of which tab is open, and since you don't want to keep your tabs in a list, then you need to link a TabHeader to a TabContent:

const TabHeaderItem = props => {
  return (
    <div
      onClick={() => props.changeTab(props.text.toLowerCase())}
      className={props.state ? "active" : ""}
    >
      {props.text}
    </div>
  );
};

const TabContentsItem = props => {
  return <div className={props.open ? "open" : "closed"}>{props.content}</div>;
};

const TabComponent = () {
  const [active, setActive] = useState("personal");
  const changeTab = tab => {
    console.log("tab", tab);
    setActive(tab);
  };

  return (
    <div className="App">
      <div className="tabs">
        <TabHeaderItem
          changeTab={changeTab}
          text="Personal"
          state={active === "personal"}
        />
        <TabHeaderItem
          changeTab={changeTab}
          text="Job"
          state={active === "job"}
        />
        <TabHeaderItem
          changeTab={changeTab}
          text="Salary"
          state={active === "salary"}
        />
      </div>
      <div className="tabs-content">
        <TabContentsItem
          content="I am a HR Specialist."
          open={active === "personal"}
        />
        <TabContentsItem
          content="No records have been added yet"
          open={active === "job"}
        />
        <TabContentsItem
          content="This type of information needs to be added by your manager"
          open={active === "salary"}
        />
      </div>
    </div>
  );
}

You can check out the working example here: https://codesandbox.io/s/exciting-gauss-lbghq