Question

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

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中以多种方式执行此操作但不会过多地更改代码，您可以通过更改render()组件的Tabs方法来完成此任务，如下所示：

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渲染标签。对于每个标签，我们附加了click handler。

您可以通过创建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

我实现了这个功能，并且效果很棒：

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

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挂钩，例如“ isActive”，并在标记类上进行设置。

Answer 3

如果你拥有的只是一把锤子，那么一切看起来都像钉子

不要试图将React用于一切。这不仅是一种不好的做法。 React从来没有打算适合这个目的。创建标签是90％的CSS，只有10％的JS（控制哪一个获得＆＃34;活动＆＃34;状态。

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

如果你想在React组件中自动化这个（例如）你唯一要做的就是将一个标签点击绑定到一个活动状态一个表示活动状态的类名（例如：tab- -活性）。并创建一个默认值。

＆＃13;

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

＆＃13;

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

＆＃13;

简而言之：

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

React可能是用于此目的的有效工具，但首先让React呈现HTML和CSS。如果你不能接受＆＃34;接线＆＃34;工作的逻辑打开一个问题，表明你遇到的具体问题。

如何使用任何库实现选项卡？

3 个答案: