[解決済み] ReactでのCSS疑似要素

質問

私は リアクト コンポーネントを作成しています。で提案されているように、コンポーネントの中にインラインでCSSを追加しています。 この見事なプレゼンテーション で提案されているように、コンポーネントに CSS をインラインで追加しました。私は、プレゼンテーションの "::after" というタイトルのスライドのように、CSS 擬似クラスをインラインで追加する方法を見つけるために一晩中試していました。残念ながら、私は単に content:""; プロパティだけでなく position:absolute; -webkit-filter: blur(10px) saturate(2); . このスライドでは、コンテンツを {/* … */} を通してコンテンツを追加する方法を示していますが、他のプロパティをどのように追加するのでしょうか？

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

で @Vjeux から返信がありました。 リアクト チームから返信がありました。

通常のHTML/CSSです。

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

Reactをインラインスタイルで。

render: function() {
    return (
        <div>
          <span>Something</span>
          <div style={{position: 'absolute', WebkitFilter: 'blur(10px) saturate(2)'}} />
        </div>
    );
},

このトリックは ::after を使う代わりに、Reactで新しい要素を作成することです。この要素をあちこちに追加するのが嫌なら、代わりにやってくれるコンポーネントを作ればいいのです。

のような特殊な属性の場合は -webkit-filter のような特殊な属性は、ダッシュを削除し、次の文字を大文字にすることでエンコードされます。つまり、次のようになります。 WebkitFilter . ただし {'-webkit-filter': ...} を使ってもうまくいくはずです。