reactJSのレンダリング条件関数からCSSスタイルプロパティを変更できますか？

Question

ロングストーリーショートイベントリスナーとハンドラーで反応コンポーネントを使用する方法を練習しています。私はここで何をしようとしている

var Frame = React.createClass({ 

    getInitialState: function() { 
    return {hover: false} 
    }, 

    toggleHover: function(e) { 
     this.setState({ 
      hover: !this.state.hover 
     }) 
    }, 

    render: function() { 
     if (this.state.hover){ 
      linkStyle = "blue"; 
     }else{ 
      linkStyle = "red"; 
     } 

     var frameStyle = { 
      width: 100, 
      height: 100, 
      backgroundColor: {this.props.linkStyle} 
     }; 

     return (
      <div onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover} style={frameStyle}> 
      </div> 
     ); 
    } 
}); 

は単純です：以下は、私が開発したコードです。マウスがdivコンポーネントに入ると色が変わります。しかし、CSSのプロパティを正しく変更していないような気がします。私は、backgroundColorのプロパティを作成し、それを条件文に置くと完全に動作すると仮定しました。

Answer 1

なぜあなたは使用する必要がありますJSホバー効果のイベントリスナー？

CSShoverのネイティブサポートがあります。 はあなたのdivクラスを付けて、CSSで次のコードを追加します。

.my-div { 
 
    color: black; 
 
} 
 

 
.my-div:hover { 
 
    color: red; 
 
}

<div class="my-div">Text here</div>

Answer 2

class Frame extends Component { 

    state = { hover: false }; 

    toggleHover() { 
    this.setState(previousState => { 
     return {hover: !previousState.hover}; 
    }); 
    } 

    render() { 

    const frameStyle = { 
     width: 100, 
     height: 100, 
     backgroundColor: this.state.hover ? 'blue' : 'red' 
    } 

    return (
     <div 
     onMouseEnter={this.toggleHover.bind(this)} 
     onMouseLeave={this.toggleHover.bind(this)} 
     style={frameStyle}> 
     </div> 
    ); 
    } 
} 

これは、あなたが、私はそれはしかし、構文を反応させるのより多くの電流を使用するように変更、欲しいものを行います。いくつかの注意：

• createClass関数は廃止され、将来的にはReactコンポーネントはクラス構文かJSXを返す単純な関数のどちらかで作成する必要があります。
• 'コンストラクタ'関数でクラス構文を使用するときに初期状態を設定することも、ここで使用している略語を使用することもできます。
• ステート自体の値（{hover：！state.hover}など）を使用して状態を変更する場合は、ステートの値を直接使用するのではなく、setStateでpreviousState引数を使用する必要があります。