Bagaimanakah Saya Boleh Melaksanakan Elemen Pseudo CSS Sebaris (seperti ::selepas) dalam React?

Elemen Pseudo CSS Sebaris dalam React

Dalam komponen React, CSS sebaris boleh ditambah terus. Walau bagaimanapun, keupayaan untuk menambah kelas pseudo CSS sebaris, serupa dengan slaid "::after" dalam pembentangan React yang popular, telah menjadi satu cabaran.

Untuk menyelesaikannya, pertimbangkan penyelesaian berikut yang disediakan oleh @Vjeux dari pasukan React:

Biasa HTML/CSS:

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

Bertindak balas dengan Gaya Sebaris:

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

Perbezaan utama di sini ialah daripada menggunakan ::after dalam CSS untuk mencipta elemen baharu, React membenarkan anda mencipta elemen baharu secara langsung. Jika mahu, anda boleh mengabstrakkannya ke dalam komponen boleh guna semula untuk pelaksanaan yang lebih mudah.

Perhatikan bahawa untuk atribut khas seperti -webkit-filter, keluarkan tanda sempang dan gunakan huruf besar berikut. Jadi -webkit-filter menjadi WebkitFilter. Menggunakan {'-webkit-filter': ...} sepatutnya berfungsi juga.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melaksanakan Elemen Pseudo CSS Sebaris (seperti ::selepas) dalam React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!