Question

如果我点击第二页，重新加载页面后，所有标签都会出现CURRENT类，如何修复？如何在第一个TAB上禁用当前类？如果我删除activeClassName =＆＃34; current＆＃34;，重新加载当前类后切换到第一个标签，但我看到第二个标签内容

 import React from 'react'
import { Link, browserHistory,IndexLink } from 'react-router'




class Tabs extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
              index: ''                
        };
        this.onclick = this.onclick.bind(this);
    }

    onclick(index) {
        this.setState({index});
    }

    getListItem(){
        let numbers = this.props.menuitems;
        let listItems = numbers.map((item,index) =>
                <li

                  onClick={this.onclick.bind(this, index)} key={index}>

          <Link to={item.link} activeClassName="current"
           className={index == this.state.index? "tab-link current" : "tab-link"}>{item.linkName}</Link>
                  </li>
        );
        return listItems;
    }

    render() {
        return (
            <div>
                <ul className="tabs" >{this.getListItem()}</ul>
                <div className="tabs-header-stripe"></div>
            </div>
        );
    }
}
export default Tabs

Answer 1

根据您描述的方案，您需要stateful component而不是stateless function component。将当前选项卡的索引存储在状态变量中，并在onclick方法中更新它，在rendering比较状态变量索引与项目索引之间，如果它们相同则应用该类。试试这个类似的例子，它也适用于你的情况：

class HelloWidget extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
              index: ''                
        };
        this.onclick = this.onclick.bind(this);
    }

    onclick(index) {
        this.setState({index});
    }

    getListItem(){
        let numbers = this.props.menuitems;
        let listItems = numbers.map((item,index) =>
                <li style={{color: this.state.index==index?'red': 'black'}} className={this.state.index == index ? "tab-link current" : "tab-link"} onClick={this.onclick.bind(this, index)} key={index}>{index}-{item.number}</li>
        );
        return listItems;
    }

    render() {
        return (
            <div>
                <ul className="tabs" >{this.getListItem()}</ul>
                <div className="tabs-header-stripe"></div>
            </div>
        );
    }
}

React.render(<HelloWidget menuitems={[{number:0, index:0}, {number:1, index:1}, {number:3, index:3}]}/>, document.getElementById('container'));

检查jsfiddle是否有工作示例：https://jsfiddle.net/27po3p4b/

Answer 2

className current仅在第一个选项卡上，因为您正在检查index === 0（第一个选项卡），如果为true，则表示您正在添加当前类。

您需要保持activeTabIndex状态，并在onClick函数上将activeTabIndex更改为正确的索引。

然后你可以检查

className={index === this.state.activeTabIndex ? "tab-link current" : "tab-link"}

需要在标签中更改活动类（反应）

2 个答案: