[React/JSX]：当当前组件被点击时，删除同级组件上的 CSS 类

Question

我正在使用 React 构建导航栏。导航栏有各种导航项。单击其中一个导航项时，必须将 class 'active' 添加到单击的项（如果它处于活动状态，则可以通过新的状态跟踪轻松实现此部分）。

但是，当 'active' class 添加到其中一个导航项时，必须将活动的 class 从当前拥有它的任何其他导航项中删除。这对于 jQuery 来说很简单，但我猜这不是 React 的最佳实践。从同级导航项中删除 'active' class 的理想方法是什么？

Answer 1

我最近开始学习 React，所以我不是专家。但我刚刚开始构建一些选项卡，您可以看到我的示例 here。

我所做的是创建一个有条件的 isActive 状态，该状态在单击事件时发生变化。然后 class 变成了这样：

className={this.props.isActive ? "active" : null}

Answer 2

我认为最好的方法是在容器组件中处理这个问题。菜单项不需要相互了解，但容器可以。所以容器可以给 children onClick 回调。稍后在回调容器中可以通过 setState 设置其状态。在 render 函数中，您只需将 active 属性传递给 MenuItem。

// ES6, React 0.14
var MenuItem = ({onClick, text, active}) => (
    <button onClick={onClick} style={active? {color: 'red'} : null}>{text}</button>
);

// example of use: <MenuBar buttons={['cat', 'dog', 'penguin']}/>
class MenuBar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {activeIndex: 0};
    }
    handleItemClick(index) {
        this.setState({activeIndex: index});
    }
    render() {
        var activeIndex = this.state.activeIndex;
        return <div>
            {
                this.props.buttons.map(
                    (btn, i) => (
                        <MenuItem
                            active={activeIndex === i}
                            key={i}
                            onClick={this.handleItemClick.bind(this, i)}
                            text={btn} />
                    )
                )
            }
        </div>
    }
}

[React/JSX]：当当前组件被点击时，删除同级组件上的 CSS 类

[React/JSX]: Remove CSS classes on sibling components, when the current component is clicked

javascript

css

jquery

reactjs

react-jsx