Comment rendre dynamiquement des composants dans React avec une conversion de casse correcte ?

Rendu dynamique des composants dans React / JSX

Les développeurs React rencontrent souvent le besoin de restituer dynamiquement des composants en fonction de leur type. Cependant, l'utilisation de la syntaxe de type "Component" entraîne souvent une sortie inattendue, car elle se compile en au lieu de .

Pour résoudre ce problème, la communauté React a proposé diverses solutions. Une méthode consiste à créer de nouvelles méthodes distinctes pour chaque composant, offrant ainsi un moyen pratique de créer des instances et de garantir une conversion correcte de la casse.

Cependant, une solution plus élégante existe en exploitant la syntaxe ECMAScript 6 (ES6). React compile JSX en JavaScript à l'aide de la méthode React.createElement, qui attend une chaîne (balise HTML) ou une fonction (classe React) comme premier paramètre. Par conséquent, en stockant la classe du composant dans une variable avec une première lettre majuscule, React la reconnaît automatiquement comme un nom de composant.

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

Ce code se compile en :

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

Cette technique permet un rendu dynamique des composants avec une conversion de casse correcte, offrant une solution pratique et maintenable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!