Maison  >  Article  >  interface Web  >  Comment rendre dynamiquement des composants par type dans React ?

Comment rendre dynamiquement des composants par type dans React ?

Susan Sarandon
Susan Sarandonoriginal
2024-11-12 01:31:03692parcourir

How to Render Components Dynamically by Type in React?

Rendu dynamique des composants par type

Problème :

Développer des composants dynamiques en fonction de leur type présente un défi où la simple concaténation une chaîne avec "Component" entraîne une syntaxe incorrecte. Créer de nouvelles méthodes pour chaque composant afin de résoudre ce problème demande beaucoup de travail.

Solution :

Utiliser une approche moderne suggérée par la documentation officielle de ReactJS :

const Component = React.createElement(type, props);

Explication :

Au lieu d'utiliser la concaténation de chaînes méthode, qui attend une balise HTML ou une fonction ReactClass, la solution ci-dessus utilise directement React.createElement. Il accepte deux paramètres : le type de composant sous forme de chaîne ou de fonction et un objet facultatif avec les accessoires du composant. Cette approche élimine le besoin de nommer les variables avec des lettres majuscules et fournit une solution plus élégante.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn