如何通过动态react更改类的 css

IT技术 javascript html css reactjs state
2021-05-17 11:57:07

我的问题是关于通过另一个类更改类的 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>
      )
    }
  }
1个回答

classNamestyle指令接受的动态值的内插。您可以使用它来实现您想要的。

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

看一下在线演示