Si hago clic en Segunda página, después de recargar la página, todas las pestañas obtienen la clase ACTUAL. ¿Cómo solucionar esto? ¿Cómo deshabilitar la clase actual en la primera TAB? Si elimino activeClassName = "actual", después de recargar la clase actual, cambie a la primera pestaña, pero vi el contenido de la segunda pestaña
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 TabsDe acuerdo con el escenario que describió, necesita un stateful component en lugar de un componente de stateless function component . Almacene el índice de la pestaña actual en la variable de estado y actualícelo dentro del método onclick , durante la rendering compare el índice de la variable de estado con el índice del elemento, si son iguales, aplique la clase. Pruebe este ejemplo similar, también debería funcionar en su caso:
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')); verifique el jsfiddle para ver el ejemplo de trabajo: https://jsfiddle.net/27po3p4b/
el className actual solo está en la primera pestaña porque está verificando si el índice === 0 (primera pestaña) y si es verdadero, está agregando la clase actual.
Debe mantener un estado de activeTabIndex y en su función onClick cambie el activeTabIndex al índice correcto.
y luego puedes comprobar
className={index === this.state.activeTabIndex ? "tab-link current" : "tab-link"}