Comment rendre dynamiquement des composants dans React/JSX ?

Rendu dynamique des composants dans React/JSX

Le JSX de React permet un rendu déclaratif des composants, mais parfois les développeurs peuvent avoir besoin de restituer dynamiquement des composants basés sur leur type.

Le Problème

Lors de la tentative de rendu dynamique d'un composant à l'aide de l'extrait de code ci-dessous, une erreur se produit :

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

L'erreur se produit car le code utilise la syntaxe de tableau alors que JSX attend du XML . D'autres solutions, comme créer une méthode pour chaque composant, ne sont pas élégantes.

La solution

La documentation React fournit désormais une solution officielle pour le rendu dynamique des composants :

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

Ce code se compile en :

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

La variable MyComponent stocke la classe du composant et est en majuscule. La fonction React.createElement utilise ensuite cette classe pour créer l'élément composant.

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!