如何通过动态反应更改类的css？
如何通过动态反应更改类的css？
提问于 2017-10-24 00:16:06
我的问题是关于通过另一个类更改类的CSS。我知道，只有当我们试图更改的元素是相邻的或所选元素的同级元素时，我才能更改CSS。
我的目标是改变标题和标签类的背景颜色时，链接‘血腥玛丽’被选中，但我不知道如何做到这一点。我使用的是React，我思考它的方式是使用状态。默认为白色，当血腥玛丽链接处于活动状态时，它将将状态从白色更改为黑色。我也计划改变其他样式，如字体颜色，但主要想法保持不变，通过反应动态改变样式。
我已经把我的代码剥离到了基础上，这样看起来就更干净了。如果你能提供一些帮助，我们将不胜感激。
class Header extends React.Component {
render () {
return(
<div>
<div className='header'>
<li className='tabs'><NavLink className='style'
activeClassName='selected'>Home</NavLink></li>
<li className='tabs'><NavLink className='style'
activeClassName='selected'>Team</NavLink></li>
<div className='dropdown'>
<div className='tabs'><NavLink className='style projectstab'
activeClassName='selected'>Projects</NavLink></div>
<div className='dropdown-content'>
<a>
<p className='dropdown-li'>
</p>
<NavLink activeClassName='bloodyselected'>
Bloody Mary
</NavLink>
</a>
</div>
</div>
<li className='tabs'><NavLink className='style'
activeClassName='selected'>Contact Us</NavLink></li>
</div>
)
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2017-10-24 00:30:35
className和style指令接受动态值的插值。你可以用这个来实现你想要的。
class Hello extends React.Component {
constructor(props) {
super(props);
this.state = { style: {} };
this.bloodyMary = this.bloodyMary.bind(this);
}
bloodyMary() {
this.setState({
style: { backgroundColor: 'red' },
class: 'someclass'
});
}
render() {
return <div style={this.state.style} className={this.state.class}>
<a onClick={this.bloodyMary}>Bloody Mary</a>
</div>;
}
}看一看在线演示
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46900320
复制相关文章
相似问题
腾讯云开发者
