どのように私は動的に反応を介してクラスのCSSを変更するのですか

Question

私の質問は、別のクラスを介してクラスのCSSを変更することに関するものです。変更しようとしている要素が選択された要素の隣接または兄弟である場合にのみ、CSSを変更できることを認識しています。

私の目標は、Link 'Bloody Mary'が選択されたときに、ヘッダーとタブのクラスの背景色を変更することですが、これを行う方法はわかりません。 私はReactを使用しています。私はそれが州を使用していると考えていました。デフォルトは白で、Bloody Maryリンクがアクティブなときには、状態が白から黒に変わります。私はまた、フォントの色のような他のスタイルを変更する予定ですが、主なアイデアは変わりません。

私は自分のコードを基本的に取り除いているので、よりきれいに見えます。もしあなたがいくつかの助けを提供できるなら、それは高く評価されるでしょう。

Answer 1

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

NavLinkが選択されているかを決定するために、あなたの関数だonline demo