Bagaimana untuk Memberikan Nama Komponen Dinamik dalam React dan JSX?

Nama Komponen Dinamik dalam React dan JSX

Dalam React, pemaparan komponen dinamik membolehkan anda mencipta komponen berdasarkan jenisnya semasa masa jalan. Untuk menggambarkan ini, pertimbangkan contoh berikut:

var type = "Example";
var ComponentName = type + "Component";
return <ComponentName />; // Returns <examplecomponent /> instead of <ExampleComponent />

Penyelesaian terdahulu, yang dicadangkan dalam urutan nama komponen dinamik React/JSX, mengakibatkan ralat penyusunan disebabkan oleh perbezaan sintaks. Sebagai alternatif, kaedah berasingan boleh dibuat untuk setiap komponen:

newExampleComponent() {
    return <ExampleComponent />;
}

newComponent(type) {
    return this["new" + type + "Component"]();
}

Walau bagaimanapun, pendekatan ini memerlukan kaedah baharu untuk setiap komponen, yang boleh menyusahkan.

Nasib baik, terdapat penyelesaian yang lebih elegan yang melibatkan penghantaran jenis komponen sebagai rentetan kepada fungsi React.createElement(). Fungsi ini menjadikan komponen menggunakan jenis yang disediakan. Contohnya:

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

Kod ini disusun kepada:

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

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