Javascript 如何在react中使用任何库实现选项卡？

您能告诉我如何在使用任何库时实现选项卡吗？ 我遵循此链接并尝试创建选项卡 但没有成功。 这是我的密码：

import React，{Component}来自'React'；
类选项卡扩展组件{
构造函数（）{
超级（）；
此。状态={
已选：0
}
}
_renderContent（）{
返回(
{this.props.children[this.state.selected]}
);
}
render（）{
返回(
{this.\u renderContent（）}
)
}
}
导出默认选项卡；

我无法显示选项卡，单击后会显示单个内容 有更新吗

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

不要试图对一切都使用React。这不仅是一种糟糕的做法。React从未打算达到这个目的。创建选项卡是90%的CSS，只有10%的JS（控制哪个选项卡处于“活动”状态）

我创建了一个100%使用CSS实现选项卡的示例，但效果不好，因为只有在单击选项卡后才会显示内容，没有默认设置

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

.tabs\u列表项{
显示：内联；
}
.标签{
显示：无；
}
.tab:target{/*仅在单击tab时有效，可使用React修复*/
显示：块；
}

表1标题
这是表1的内容

表2标题
这是表2的内容

表3标题
这是表3的内容

如果我正确理解您的问题，您只需要显示选项卡的标签

您可以在

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

---

演示：

我实现了这一点，并且工作非常出色：

我正在使用一个带有挂钩的功能组件

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

const Tabs=（）=>{
const[currentTab，setCurrentTab]=useState（'first-tab'）；
常量切换选项卡=（）=>{
开关（当前选项卡）{
案例“第一个选项卡”：
返回；
案例“第二个选项卡”：
返回；
违约：
返回null；
}
};
返回(
setCurrentTab（'first-tab'）}>first-tab
setCurrentTab（'second-tab'）}>second-tab
{toggleTab（）}
);
};

如果需要，可以添加更多组件

---

---

Psdt：如果你想在当前的标签标题中添加样式，你可以创建另一个useState钩子，比如“isActive”，这样可以在标签类上设置它。

你有没有遇到什么特别的问题？@zerkms我无法显示标签，单击后会在其中显示单独的内容

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;

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