Bagaimana Cara Menggunakan Atribut Kelas Secara Bersyarat dalam Komponen React?

Menggunakan Atribut Kelas Secara Bersyarat dalam React

Dalam React, selalunya perlu untuk menunjukkan atau menyembunyikan elemen secara bersyarat berdasarkan nilai yang dihantar daripada komponen induk . Ini boleh dicapai dengan memanipulasi atribut kelas komponen anak.

Contoh:

<TopicNav showBulkActions={this.__hasMultipleSelected} />

__hasMultipleSelected: function() {
  return false; //return true or false depending on data
}

var TopicNav = React.createClass({
  render: function() {
    return (
        <div className="row">
            <div className="col-lg-6">
                <div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}>
                    <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                      Bulk Actions <span className="caret"></span>
                    </button>
                    <ul className="dropdown-menu" role="menu">
                      <li><a href="#">Merge into New Session</a></li>
                      <li><a href="#">Add to Existing Session</a></li>
                      <li className="divider"></li>
                      <li><a href="#">Delete</a></li>
                    </ul>
                </div>
            </div>
        </div>
        );
      }
    });

Penjelasan:

Kunci untuk menggunakan atribut kelas secara bersyarat dalam React ialah menggunakan operator bersyarat (ternari) dalam pendakap kerinting untuk sifat className. Dalam contoh ini, jika this.props.showBulkActions adalah benar, kelas pertunjukan digunakan, jika tidak kelas tersembunyi digunakan.

Nota: Pastikan pendakap kerinting berada di luar rentetan, seperti yang ditunjukkan dalam contoh di atas. Jika tidak, ungkapan akan dinilai sebagai rentetan dan nama kelas yang diingini tidak akan digunakan.

Atas ialah kandungan terperinci Bagaimana Cara Menggunakan Atribut Kelas Secara Bersyarat dalam Komponen React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!