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

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

---

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

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

我所做的是使一个条件isActive状态在单击事件时发生更改。然后，该类被更改为：

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

---

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

我所做的是使一个条件isActive状态在单击事件时发生更改。然后，该类被更改为：

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

---

我认为最好的方法是在容器组件中处理这个问题。菜单项不需要相互了解，但容器可以。所以容器可以给孩子onClick回调。稍后在回调中，容器可以通过

setState

设置其状态。在

render

函数中，只需将

active

属性传递给菜单项

// 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>
    }
}

//ES6，反应0.14
var MenuItem=（{onClick，text，active}）=>(
{text}
);
//使用示例：
类菜单栏扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={activeIndex:0}；
}
handleItemClick（索引）{
this.setState（{activeIndex:index}）；
}
render（）{
var activeIndex=this.state.activeIndex；
返回
{
这个是.props.buttons.map(
（btn，i）=>(
)
)
}
}
}

我认为最好的方法是在容器组件中处理这个问题。菜单项不需要相互了解，但容器可以。所以容器可以给孩子onClick回调。稍后在回调中，容器可以通过

setState

设置其状态。在

render

函数中，只需将

active

属性传递给菜单项

// 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>
    }
}

//ES6，反应0.14
var MenuItem=（{onClick，text，active}）=>(
{text}
);
//使用示例：
类菜单栏扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={activeIndex:0}；
}
handleItemClick（索引）{
this.setState（{activeIndex:index}）；
}
render（）{
var activeIndex=this.state.activeIndex；
返回
{
这个是.props.buttons.map(
（btn，i）=>(
)
)
}
}
}

我认为您应该在容器级别（导航栏）而不是在导航项中解决此问题。导航栏应该知道它的子项。项目（导航栏的子项）不需要相互了解。交谈很便宜。我已经在下面显示了代码；）我认为您应该在容器级别（导航栏）而不是在导航项中解决此问题。导航栏应该知道它的子项。项目（导航栏的子项）不需要相互了解。交谈很便宜。我已经在下面显示了代码；）虽然一般的方法是正确的（因此得到了公认的答案），但这段代码中有一个错误，在MenuBar:：render中，您添加了一个onClick，它应该调用handleItemClick。但这不会触发。查看此讨论了解更多详细信息：它应该可以工作，因为我选中了此选项。自己检查：。我使用了ES6 fat arrow（

=>

）语法，它自动保留了

这个
变量。当然，要使这个示例正常工作，您不必使用fat arrow语法，ES6附带的只是语法糖。这个例子也可以用ES5编写。一般方法保持不变）。虽然一般方法是正确的（因此得到了公认的答案），但此代码中有一个错误，在MenuBar:：render中，您添加了一个onClick，它应该调用handleItemClick。但这不会触发。查看此讨论了解更多详细信息：它应该可以工作，因为我选中了此选项。自己检查：。我使用了ES6 fat arrow（
=>
）语法，它自动保留了
这个
变量。当然，要使这个示例正常工作，您不必使用fat arrow语法，ES6附带的只是语法糖。这个例子也可以用ES5编写。一般方法保持不变）。