如何使用任何库实现选项卡以做出反应？

Question

您能告诉我如何使用任何库来实现选项卡吗？ 我点击此链接并尝试制作标签 https://toddmotto.com/creating-a-tabs-component-with-react/ 但没有成功。 这是我的代码：

https://codesandbox.io/s/D9Q6qWPEn

import React, {Component} from 'react';

class Tabs extends Component {
  constructor() {
    super();
    this.state= {
      selected:0
    }
  }
   _renderContent() {
    return (
      <div className="tabs__content">
         {this.props.children[this.state.selected]}
      </div>
    );
  }
  render() {
    return (
    <div className="tabs">
        {this._renderContent()}
      </div>
    )
  }
}

export default Tabs;

我无法在点击后显示标签和单独的内容 有更新吗？

Answer 1

如果我正确理解您的问题，您只想为您的标签显示 标签。

您可以在React 中通过多种方式执行此操作，但无需过多更改代码，您可以通过更改Tabs 组件的render() 方法来完成此任务，如下所示：

setTab(index) {
  this.setState({
    selected: index,
  });
}

_renderLabels() {
  return this.props.children.map((child, index) => (
    <div key={child.props.label} onClick={() => { this.setTab(index) }}>
      {child.props.label}
    </div>
  ));
}

render() {
  return (
    <div className="tabs">
      {this._renderLabels()}
      {this._renderContent()}
    </div>
  );
}

我们在这里所做的基本上是基于props.children 渲染标签。我们为每个标签附加点击处理程序。

您可以通过创建特定组件（如 TabPane、TabLabel）来改进此代码。

Tabs 组件的完整代码。

import React, { Component } from "react";

class Tabs extends Component {
  constructor() {
    super();
    this.state = {
      selected: 0
    };
  }

  setTab(index) {
    this.setState({
      selected: index,
    });
  }

  _renderContent() {
    return (
      <div className="tabs__content">
        {this.props.children[this.state.selected]}
      </div>
    );
  }

  _renderLabels() {
    return this.props.children.map((child, index) => (
      <div key={child.props.label} onClick={() => { this.setTab(index) }}>
        {child.props.label}
      </div>
    ));
  }

  render() {
    return (
      <div className="tabs">
        {this._renderLabels()} 
        {this._renderContent()}
      </div>
    );
  }
}

export default Tabs;

演示： https://codesandbox.io/s/pRvG6K0r

Answer 2

我实现了这个并且效果很好：

我正在使用带有 Hooks 的功能组件。

const Tabs = () => {
  const [currentTab, setCurrentTab] = useState('first-tab');

  const toggleTab = () => {
    switch (currentTab) {
      case 'first-tab':
        return <FirstTab />;
      case 'second-tab':
        return <SecondTab />;
      default:
        return null;
    }
  };

  return (
    <div>
      <div>
        <h3 onClick={() => setCurrentTab('first-tab')}>First Tab</h3>
        <h3 onClick={() => setCurrentTab('second-tab')}>Second Tab</h3>
      </div>
      {toggleTab()}
    </div>
  );
};

您可以根据需要添加更多组件。

---

Psdt：如果你想为当前标签标题添加样式，你可以创建另一个 useState Hook，比如“isActive”，然后在标签类上设置它。

Answer 3

const Tabs = () => {
  const tabsData = [
    { id: 0, tabName: "first tab", tabData: "first tab data" },
    { id: 1, tabName: "second tab", tabData: "second tab data" },
    { id: 2, tabName: "third tab", tabData: "third tab data" },
  ];

  const [activeIndex, setActiveIndex] = useState(false);

  const tabClick = (index) => {
    setActiveIndex(index);
  };

  return (
    <>
      <ul>
        {tabsData.map((tab) => {
          return (
            <li key={tab.id} onClick={() => tabClick(tab.id)}>
              {tab.tabName}
            </li>
          );
        })}
      </ul>
      <ul>
        {tabsData.map((tab) => {
          if (tab.id === activeIndex) {
        return <li key={tab.id}>{tab.tabData}</li>;
      }
        })}
      </ul>
    </>
  );
};

Answer 4

如果你只有一把锤子，一切看起来都像钉子

不要尝试对所有事情都使用 React。这不仅是一种不好的做法。 React 从来没有打算满足这个目的。创建标签需要 90% 的 CSS 和 10% 的 JS（控制哪一个进入“活动”状态。

我创建了一个 100% 使用 CSS 实现选项卡的示例，它不能很好地工作，因为只有 一个选项卡被点击后才会显示内容，没有默认值。

如果您想在 React 组件中自动执行此操作（例如）您唯一需要做的就是将选项卡单击绑定到活动状态一个代表 活动 状态的类名（例如：tab- -积极的）。并创建一个默认值。

.tabs__list-item {
  display: inline;
}

.tab {
  display: none;
}

.tab:target {  /* Only works if tab is clicked, can be fixed with React. */
  display: block;
}

<nav class="tabs">
  <ul class="tabs__list">
    <li class="tabs__list-item"><a class="tabs__link" href="#tab1">Tab 1</a></li>
    <li class="tabs__list-item"><a class="tabs__link" href="#tab2">Tab 2</a></li>
    <li class="tabs__list-item"><a class="tabs__link" href="#tab3">Tab 3</a></li>
  </ul>
</nav>

<section class="tab" id="tab1">
  <h1>Tab 1 header</h1>
  <p>This is the content of tab 1.</p>
</section>

<section class="tab" id="tab2">
  <h1>Tab 2 header</h1>
  <p>This is the content of tab 2.</p>
</section>

<section class="tab" id="tab3">
  <h1>Tab 3 header</h1>
  <p>This is the content of tab 3.</p>
</section>

简而言之：

• 先编写 HTML 结构/CSS 标记
• 观察缺失的逻辑
• 使用最佳工具实现缺失的逻辑。

React 可能是用于此目的的有效工具，但首先要让 React 呈现您的 HTML 和 CSS。如果您无法让“接线”逻辑正常工作，请打开一个问题，指出您遇到的具体问题。