添加/删除 css 类以响应组件答案

【问题标题】：Adding/removing css classes to react components添加/删除 css 类以响应组件
【发布时间】：2016-05-14 16:37:41
【问题描述】：

我有一个名为“Pager”的分页反应组件，它根据结果数和页面大小计算要显示的页面数，然后在单击链接时获取结果那个页面。就我而言，当用户单击链接时，我在动态添加/删除 css 类时遇到问题。当页面第一次呈现时，只有数字“1”必须是“活动的”，但是当用户点击链接“2”、“3”等时，我需要删除前一个活动的 className 属性链接并将其添加到点击的链接中。

关于如何实现这一目标的任何想法？

我的代码如下：

export class Pager extends React.Component {


constructor() {
    super();
}


handleClick(i){
    console.log('Clicked on'+i);
    this.props.dispatch(modelActionsCreator.findModelsByProductType(this.props.productType,i));
}

render() {
    console.log(this.props.numPages);
    let links = [];


    for (let i = 1; i <= this.props.numPages; i++) {
        links.push(<li key={i} className={i==1?'active':''}><a href="#" onClick={(e)=>{
        e.preventDefault();
        this.handleClick(i);
        }}>{i}</a></li>);
    }


    return (<ul className="pagination">
        <li className="prev-page"><a className="icon-arrow-left" href="#"></a></li>
        {
            links.map((item)=> {
                return item;
            })
        }
        <li className="next-page"><a className="icon-arrow-right" href="#"></a></li>
    </ul>);


}

【问题讨论】：

标签： javascript jquery css reactjs

【解决方案1】：

将活动链接置于组件状态。比如：

export class Pager extends React.Component {

constructor() {
    super();
    this.state={
      i:1
    }
}


handleClick(i){
    console.log('Clicked on'+i);
    this.props.dispatch(modelActionsCreator.findModelsByProductType(this.props.productType,i));
    this.setState({i:i});
}

render() {
    console.log(this.props.numPages);
    let links = [];


    for (let i = 1; i <= this.props.numPages; i++) {
        links.push(<li key={i} className={i==this.state.i?'active':''}><a href="#" onClick={(e)=>{
        e.preventDefault();
        this.handleClick(i);
        }}>{i}</a></li>);
    }


    return (<ul className="pagination">
        <li className="prev-page"><a className="icon-arrow-left" href="#"></a></li>
        {
            links.map((item)=> {
                return item;
            })
        }
        <li className="next-page"><a className="icon-arrow-right" href="#"></a></li>
    </ul>);


}

【讨论】：