我想使用事件和状态来处理className
class SampleComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
class1: 'bar',
class2: 'bar'
};
}
handleBarClick() {
this.setState({
class1: 'bar active',
class2: 'bar'
});
}
handleFooClick() {
this.setState({
class1: 'bar',
class2: 'bar active'
});
}
render() {
return (
<div>
<span className={this.class1} onClick={this.handleBarClick.bind(this)}>bar</span>
<span className={this.class2} onClick={this.handleFooClick.bind(this)}>foo</span>
</div>
);
}
}
但是这段代码有点浪费，应该简短一点。
我想写一个更好的方法，任何人都可以提一些建议吗？谢谢。
您可以使用classNames（https://github.com/JedWatson/classnames）以更好的方式实现相同目的，如下所示：
首先导入className：
import className from 'classnames'
第二，从您的州获得课程：
<span className={ className('bar', {'active': this.state.active, 'otherClass': this.state.booleanValue }) } />
如果您在active和booleanValue中都设置为true，则将这样结束：
<span class='bar active otherClass' />
或类似的如果是假的
<span class='bar' />
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句