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

Answer 2

我最近開始學習React，所以我不是專家。 但是我剛剛開始構建一些選項卡，您可以在這里看到我的示例。

我所做的是使有條件的isActive狀態在單擊事件上發生了變化。 然后，將類更改為：

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