将活动类添加到所选项目反应

Question

我已经制作了一个反应父组件，如果用户单击两个选项之一，则会呈现不同的子组件。

根据选择的选项，我想添加一个active 类。

在下面查看我的代码。

我已经采取了很多方法，但由于我无法弄清楚，所以将它们剥离出来。

class Test extends Component {

    constructor(props) {
        super(props);

        this.state = {
            currentView: 'one'
        };

        this.showOne = this.showOne.bind(this);
        this.showTwo = this.showTwo.bind(this);
    }

    showOne() {
        this.setState({
            currentView: 'one'
        });
    }

    showTwo() {
        this.setState({
            currentView: 'two'
        });
    }

    render(){
    ......
        <p className="one" onClick={this.showOne}>One</p>
        <p className="two" onClick={this.showTwo}>Two</p>
    ......
    }
}

Answer 1

你在寻找这样的东西吗？

<p className={this.state.currentView === 'one' ? 'one active' : 'one'} onClick={this.showOne}>One</p>
<p className={this.state.currentView === 'two' ? 'two active' : 'two'} onClick={this.showTwo}>Two</p>