Rendering bersyarat - DingTalk Help Center

Terkadang kita ingin merender Komponen hanya dalam kondisi tertentu, mirip dengan pendekatan React berikut. YiDA menyediakan opsi konfigurasi Render Condition yang memungkinkan Anda mengontrol visibilitas Komponen dengan mudah melalui pengikatan variabel:

function HelloText({showName, name}) {
	return (
  	<div>
    {showName && (<span>{name}</span>)} // Gunakan showName untuk menentukan apakah komponen teks nama ditampilkan
    </div>
  );
}

Konfigurasikan

Setiap Komponen memiliki Atribut Render Condition pada pengaturan Atribut Premium-nya untuk mengontrol rendering bersyarat Komponen tersebut. Kondisi render Default disetel ke true. Umumnya, gunakan pengikatan variabel untuk menyetel Atribut kondisi render.

Komponen dengan kondisi render yang Terkonfigurasi akan menampilkan ikon cabang pada pohon Outline untuk menandakan bahwa Komponen tersebut memiliki Atribut kondisi render yang telah disetel:

Kasus penggunaan

Berikut adalah Contoh sederhana untuk menjelaskan cara menggunakan rendering bersyarat. Kita mengontrol visibilitas Komponen teks melalui parameter URL. Ketika parameter showName ada pada URL, Komponen akan ditampilkan; jika tidak, Komponen disembunyikan. Konfigurasinya adalah sebagai berikut:

Setel Atribut kondisi render Komponen teks menggunakan pengikatan variabel:
Ikat variabel global state.urlParams.showName ke Atribut kondisi render Komponen teks untuk menentukan apakah Komponen teks dirender berdasarkan parameter URL:

Terakhir, Anda dapat mengontrol tampilan Komponen teks dengan menyetel parameter showName pada Halaman Pratinjau seperti ditunjukkan di bawah ini (buka Halaman Pratinjau langsung di browser dengan mengeklik Open in New Window di pojok kanan atas Halaman Pratinjau untuk menyetel parameter):

URL tanpa parameter showName:
URL dengan parameter showName: