Question

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

然而，当'活跃'＆＃39; class被添加到其中一个导航项中，必须从当前拥有它的任何其他导航项中删除活动类。使用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>
    }
}

Answer 2

我最近开始学习React，所以我不是专家。但我刚刚开始构建一些标签，你可以看到我的例子here。

我所做的是在click事件上创建一个有条件的isActive状态。然后课程改变如下：

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

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

2 个答案: