Bagaimanakah Saya Boleh Menambah Berbilang Kelas Secara Dinamik pada Komponen ReactJS?

Menambah Berbilang Kelas Secara Dinamik pada Komponen ReactJS

Apabila bekerja dengan ReactJS, anda mungkin menghadapi keperluan untuk menambah berbilang kelas pada className elemen atribut. Untuk mengelakkan kemungkinan ralat atau kekeliruan, literal templat ES6 menyediakan penyelesaian yang elegan.

Untuk mencapai ini, gunakan literal templat untuk menyertakan nama kelas dalam tanda belakang (`) dan menggabungkannya menggunakan operator " ". Contohnya:

const className = `class1 class2 class3`;

Dalam kes anda, anda boleh mengubah suai kaedah pemaparan komponen AccountMainMenu anda untuk menggunakan literal templat:

render() {
  var self = this;
  // ...

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

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

          const className = `${activeClass} ${data.class} main-class`;

          return (
            <li
              key={index}
              className={className}
              onClick={self.clicked.bind(self, index)}
            >
              <a href="#" className={data.icon}>
                {data.name}
              </a>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

Pendekatan ini memastikan berbilang kelas ditambah dengan betul pada atribut className tanpa memerlukan manipulasi rentetan kompleks atau kemungkinan ralat.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menambah Berbilang Kelas Secara Dinamik pada Komponen ReactJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!