Bagaimana untuk Memaparkan Komponen Secara Dinamik dalam Bertindak balas dengan Penukaran Kes Betul?

Rendering Komponen Dinamik dalam React / JSX

Pembangun React sering menghadapi keperluan untuk memaparkan komponen secara dinamik berdasarkan jenisnya. Walau bagaimanapun, menggunakan jenis sintaks "Komponen" selalunya menghasilkan output yang tidak dijangka, kerana ia disusun kepada bukannya .

Untuk menangani isu ini, komuniti React telah mencadangkan pelbagai penyelesaian. Satu kaedah melibatkan mencipta kaedah baharu yang berasingan untuk setiap komponen, menyediakan cara yang mudah untuk mencipta kejadian dan memastikan penukaran kes yang betul.

Walau bagaimanapun, penyelesaian yang lebih elegan wujud dengan memanfaatkan sintaks ECMAScript 6 (ES6). React menyusun JSX kepada JavaScript menggunakan kaedah React.createElement, yang menjangkakan rentetan (tag HTML) atau fungsi (kelas React) sebagai parameter pertamanya. Oleh itu, dengan menyimpan kelas komponen dalam pembolehubah dengan huruf besar pertama, React secara automatik mengecamnya sebagai nama komponen.

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

Kod ini disusun kepada:

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

Teknik ini membolehkan pemaparan komponen dinamik dengan penukaran sarung yang betul, menyediakan penyelesaian yang mudah dan boleh diselenggara.

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Komponen Secara Dinamik dalam Bertindak balas dengan Penukaran Kes Betul?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!