React でインライン CSS 疑似要素 (::after など) を実装するにはどうすればよいですか?

React のインライン CSS 疑似要素

React コンポーネント内では、インライン CSS を直接追加できます。ただし、人気のある React プレゼンテーションの「::after」スライドと同様に、インライン CSS 疑似クラスを追加する機能は課題でした。

これを解決するには、@Vjeux が提供する次のソリューションを検討してください。 React チーム:

通常HTML/CSS:

<div class="something"><span>Something</span></div>
<style>
    .something::after {
    content: '';
    position: absolute;
    -webkit-filter: blur(10px) saturate(2);
}
</style>

インライン スタイルに反応する:

render: function() {
    return (
        <div>
          <span>Something</span>
          <div>

ここでの主な違いは、CSS で ::after を使用する代わりに新しい要素を作成する場合、React では新しい要素を直接作成できます。必要に応じて、これを再利用可能なコンポーネントに抽象化し、実装を容易にすることができます。

-webkit-filter などの特別な属性の場合は、ダッシュを削除し、次の文字を大文字にすることに注意してください。したがって、-webkit-filter は WebkitFilter になります。 {'-webkit-filter': ...} を使用しても同様に機能するはずです。

以上がReact でインライン CSS 疑似要素 (::after など) を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。