bugfix> reactjs > 投稿

これはハンバーガーメニューを表示する私の現在のコードです。

<div className="navlines">
   <span></span>
   <span></span>
   <span></span>
 </div>

既存のクラス「navlines」に新しいクラス「open」を追加します。 どのように私はこれを反応させることができますか? 数日前に反応を学び始めました。

回答 2 件
  • このようなものを使用できます

    <div className={"navlines " + (this.props.showHamburgerMenu ? 'open' : 'close')}>
    
    

    showHamburgerMenuの値がtrueの場合、開いているクラスが追加され、それ以外の場合は閉じているクラスが存在します。

    小道具から、または状態から使用できます。

    <div className={"navlines " + (this.state.showHamburgerMenu ? 'open' : 'close')}>
    
    

    何らかのクリックまたはユーザーアクションに基づいて、showHamburgerMenuの状態をtrueに設定できます。

    フィドル https://jsfiddle.net/jbh1qgzu/1/

  • htmlのようにしてください。

    <div className="navlines open">
    
    

    ある条件に基づいて動的にそれをしたい場合

    var className = "navlines" + (condition ? " open" : "");
    return (<div className={ className } />);
    
    

あなたの答え