Как собрать компонент Tabs Reactjs

Question

Я пытаюсь создать компонент Tabs с ReactJS, и я слежу за CSS таблицей стилей. Итак, я хотел бы иметь это в качестве рендера:

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

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>
  );
}

Вы можете посмотреть рабочий пример здесь: https://codesandbox.io/s/exciting-gauss-lbghq