[React/JSX]:在单击当前组件时,删除兄弟组件上的CSS类

Question

我正在用React构建一个导航栏.导航栏具有各种导航项.单击其中一个导航项时,必须将"活动"类添加到单击的项目中(如果新的状态跟踪处于活动状态,则可以轻松实现此部分).

但是,当"活动"类添加到其中一个导航项时,必须从当前具有该活动类的任何其他导航项中删除活动类.使用jQuery这很简单,但我猜这不是React的最佳实践.从兄弟导航项中删除"活动"类的理想方法是什么？

Answer 1

我认为最好的方法是在容器组件中处理它.菜单项不需要彼此了解,但容器可以.所以容器可以给孩子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>
    }
}