Javascript 如何在React中实现选项卡功能

我在HTML/JSX中有以下结构

<ul>
  <li className="active">Tab 1</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
</ul>

---

如何使用React方式实现此功能？我不想使用任何其他外部库.TIA。

您可以在组件状态下存储活动选项卡索引，并在单击选项卡后更改它。看看这个工作示例，它解释了React.js-

类HelloWidget扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
activeTabIndex:0
};
}
changeTab（newActiveTabIndex）{
这是我的国家({
activeTabIndex:newActiveTabIndex
});
}
render（）{
const{activeTabIndex}=this.state；
返回(


表1


表2


表3


)
}
}
React.render（，document.getElementById（'container'）；

React是关于组件的。在这种情况下，我建议您创建特定的可重用组件，例如

Tab

和

TabBar

。它的好处是，您的代码变得更干净、更容易理解。您只需使用

state

即可跟踪当前选项卡

const选项卡=（{active，children，onClick}）=>
{children}
类TabBar扩展了React.Component{
构造函数（）{
超级（）
this.state={activeTabIndex:0}
this.changeTab=this.changeTab.bind（this）
}
更改选项卡（索引）{
this.setState（{activeTabIndex:index}）
}
render（）{
const{activeTabIndex}=this.state
返回(

表1
表2
表3

)
}
}
ReactDOM.render（，document.getElementById（'root'））

#根li{
显示：内联块；
利润率：0.10px；
}
#根李{
背景色：红色；
颜色：白色；
字体大小：粗体；
}

---

您可以使用组件的状态，并且由于您是从组件本身中调用方法，因此不需要在构造函数中绑定它们。以下是使用函数生成的解决方案：

import React, { Component } from 'react';

export default class Tab extends Component {
    constructor(props){
        super(props);
        this.state = { tabActive: 1 };
    }

    /**
     * Function generator to handle switching tab with tabIndex
     * 
     * @param {number} tabIndex 
     * @returns {function}
     * @memberof Tab
     */
    changeTab(tabIndex) {
        return () => {
            this.setState({ tabActive: tabIndex });
        };
    }

    /**
     * determines the class name based on the active tab
     * 
     * @param {number} tabIndex 
     * @returns {string}
     * @memberof Tab
     */
    getClassName(tabIndex) {
        return (this.state.tabActive === tabIndex ? 'active' : '');
    }

    render() {
        return (
            <div>
                <ul>
                    <li className={ this.getClassName(1) }
                        onClick={ this.changeTab(1) }>
                        Tab 1
                    </li>
                    <li className={ this.getClassName(2) }
                        onClick={ this.changeTab(2) }>
                        Tab 2
                    </li>
                    <li className={ this.getClassName(3) }
                        onClick={ this.changeTab(3) }>
                        Tab 3
                    </li>
                </ul>
            </div>
        );
    }
}

import React，{Component}来自'React'；
导出默认类选项卡扩展组件{
建造师（道具）{
超级（道具）；
this.state={tabActive:1}；
}
/**
*使用tabIndex处理切换选项卡的函数生成器
* 
*@param{number}tabIndex
*@returns{function}
*@memberof选项卡
*/
更改选项卡（选项卡索引）{
return（）=>{
this.setState（{tabActive:tabIndex}）；
};
}
/**
*根据活动选项卡确定类名
* 
*@param{number}tabIndex
*@返回{string}
*@memberof选项卡
*/
getClassName（tabIndex）{
返回（this.state.tabActive===tabIndex？'active'：''）；
}
render（）{
返回(


表1


表2


表3


);
}
}

  class HelloWidget extends React.Component{
    constructor(props) {
      super(props);

      this.state = {
        activeTabIndex: 0
      };
    }

    changeTab(newActiveTabIndex) {
      this.setState({
        activeTabIndex: newActiveTabIndex
      });
    }

    render() {
            const { activeTabIndex } = this.state;

        return (
            <div>
              <ul>
                  <li
                    className={activeTabIndex === 0 ? 'active' : ''}
                    onClick={this.changeTab.bind(this, 0)}
                  >
                    Tab 1
                  </li>
                  <li
                    className={activeTabIndex === 1 ? 'active' : ''}
                    onClick={this.changeTab.bind(this, 1)}
                  >
                    Tab 2
                  </li>
                  <li
                    className={activeTabIndex === 2 ? 'active' : ''}
                    onClick={this.changeTab.bind(this, 2)}
                  >
                    Tab 3
                  </li>
              </ul>
          </div>
        )
    }
  }

  React.render(<HelloWidget />, document.getElementById('container'));

import React, { Component } from 'react';

export default class Tab extends Component {
    constructor(props){
        super(props);
        this.state = { tabActive: 1 };
    }

    /**
     * Function generator to handle switching tab with tabIndex
     * 
     * @param {number} tabIndex 
     * @returns {function}
     * @memberof Tab
     */
    changeTab(tabIndex) {
        return () => {
            this.setState({ tabActive: tabIndex });
        };
    }

    /**
     * determines the class name based on the active tab
     * 
     * @param {number} tabIndex 
     * @returns {string}
     * @memberof Tab
     */
    getClassName(tabIndex) {
        return (this.state.tabActive === tabIndex ? 'active' : '');
    }

    render() {
        return (
            <div>
                <ul>
                    <li className={ this.getClassName(1) }
                        onClick={ this.changeTab(1) }>
                        Tab 1
                    </li>
                    <li className={ this.getClassName(2) }
                        onClick={ this.changeTab(2) }>
                        Tab 2
                    </li>
                    <li className={ this.getClassName(3) }
                        onClick={ this.changeTab(3) }>
                        Tab 3
                    </li>
                </ul>
            </div>
        );
    }
}