Bagaimana untuk Menambah Berbilang Kelas ke Komponen ReactJS?

Menambah Berbilang Kelas pada Komponen ReactJS

Apabila bekerja dengan ReactJS dan JSX, anda mungkin menghadapi situasi di mana anda perlu menggunakan berbilang kelas pada komponen tunggal. Satu senario biasa ialah menambahkan kelas aktif secara bersyarat apabila elemen difokuskan atau diklik.

Dalam contoh anda, anda cuba menambah berbilang kelas pada atribut className bagi elemen li seperti ini:

Walau bagaimanapun, pendekatan ini menggunakan operator koma ,, yang hanya menggabungkan rentetan tanpa menambah ruang putih. Untuk menambah berbilang kelas dengan betul, anda perlu menggunakan ciri literal templat ES6.

Dalam komponen AccountMainMenu anda, ubah suai kaedah pemaparan seperti berikut:

render: function() {
    // ... existing code

    return (
      <div classname="acc-header-wrapper clearfix">
        <ul classname="acc-btns-container">
          {accountMenuData.map((data, index) => {
            let activeClass = "";

            if (this.state.focused == index) {
              activeClass = "active";
            }

            return (
              <li key="{index}" classname="{`${activeClass}" main-class onclick="{this.clicked.bind(self," index>
                <a href="#" classname="{data.icon}">
                  {data.name}
                </a>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }

Sekarang, atribut className menggunakan templat literal untuk menggabungkan berbilang kelas dengan ruang putih. Dengan interpolasi pembolehubah activeClass dan data.class, anda boleh menggunakan kelas yang diingini secara bersyarat.

Pendekatan ini membolehkan anda menambah dan mengalih keluar kelas secara dinamik berdasarkan keadaan komponen atau prop, memberikan lebih fleksibiliti dan kawalan ke atas ReactJS anda komponen.

Atas ialah kandungan terperinci Bagaimana untuk Menambah Berbilang Kelas ke Komponen ReactJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!