[解決済み】ReactのインラインCSSスタイル：a:hoverを実装する方法は？

質問

がかなり好きです。 React のインライン CSS パターン で、これを使うことにしました。

ただし :hover と同様のセレクタを使用します。では、インラインのCSSスタイルを使用しながらハイライト・オン・ホバーを実装するには、どのような方法があるのでしょうか？

reactjsからの提案のひとつに Clickable コンポーネントを作成し、このように使用します。

<Clickable>
    <Link />
</Clickable>

は Clickable には hovered の状態にして、それをLinkにpropsとして渡しています。しかし Clickable (をラップしています（私の実装方法）。 Link の中に div を設定できるようにします。 onMouseEnter と onMouseLeave を追加しました。このため、少し複雑になりますが（例えば span に包まれた div とは動作が異なります。 span ).

もっと簡単な方法はないのでしょうか？

どのように解決するのですか？

私も同じような状況です。コンポーネントでスタイルを維持するパターンはとても気に入っていますが、ホバーステートは最後のハードルのように思えます。

私が行ったのは、ホバーステートが必要なコンポーネントに追加できるミキシンを書くことです。 このミキシンは hovered プロパティをコンポーネントの状態に追加します。このプロパティは、以下のように設定されます。 true ユーザがコンポーネントのメイン DOM ノードにマウスを置いたときに、この値を false をクリックすると、その要素から離れることができます。

これで、コンポーネントのレンダー関数で、次のようなことができるようになる。

<button style={m(
     this.styles.container,
     this.state.hovered && this.styles.hover,
)}>{this.props.children}</button>

これで、毎回 hovered 状態が変化すると、コンポーネントは再レンダリングされます。

また、私はこのためにサンドボックスレポを作成し、これらのパターンのいくつかを自分でテストするために使用しています。私の実装の例を見たい場合は、こちらをご覧ください。

https://github.com/Sitebase/cssinjs/tree/feature-interaction-mixin