Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana Cara Menggunakan Atribut Kelas Secara Bersyarat dalam Komponen React?

Bagaimana Cara Menggunakan Atribut Kelas Secara Bersyarat dalam Komponen React?

Susan Sarandon
Susan Sarandonasal
2024-10-26 02:24:27852semak imbas

How to Conditionally Apply Class Attributes in React Components?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn