Bagaimana untuk Membuat Komponen Secara Dinamik dalam React/JSX?

Rendering Komponen Dinamik dalam React/JSX

JSX React membenarkan pemaparan komponen deklaratif, tetapi kadangkala pembangun mungkin perlu membuat komponen secara dinamik berdasarkan jenis mereka.

The Isu

Apabila cuba untuk memaparkan komponen secara dinamik menggunakan coretan kod di bawah, ralat berlaku:

var type = "Example";
var ComponentName = type + "Component";
return <ComponentName />; // Error: expected XML, got array

Ralat timbul kerana kod menggunakan sintaks tatasusunan manakala JSX menjangkakan XML . Penyelesaian lain, seperti mencipta kaedah untuk setiap komponen, tidak elegan.

Penyelesaian

Dokumentasi React kini menyediakan penyelesaian rasmi untuk pemaparan komponen dinamik:

const MyComponent = Components[type + "Component"];
return <MyComponent />;

Kod ini disusun kepada:

const MyComponent = Components[type + "Component"];
return React.createElement(MyComponent, {});

Pembolehubah MyComponent disimpan kelas komponen dan huruf besar. Fungsi React.createElement kemudian menggunakan kelas ini untuk mencipta elemen komponen.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Komponen Secara Dinamik dalam React/JSX?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!