我的问题是关于通过另一个类更改类的 CSS。我知道,如果我们尝试更改的元素与所选元素相邻或同级,我只能更改 CSS。
我的目标是在选择“血腥玛丽”链接时更改页眉和选项卡类的背景颜色,但我不知道如何完成此操作。 我正在使用 React,而我的想法是使用状态。默认为白色,当血腥玛丽链接处于事件状态时,它会将状态从白色更改为黑色。我还计划更改字体颜色等其他样式,但主要思想保持不变,通过 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>
)
}
}
最佳答案
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>;
}
}
看看 online demo
关于javascript - 如何通过动态 react 更改类的 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46900320/