Comment rendre les noms de composants dynamiques dans React et JSX ?

Noms de composants dynamiques dans React et JSX

Dans React, le rendu dynamique des composants vous permet de créer des composants en fonction de leur type au moment de l'exécution. Pour illustrer cela, considérons l'exemple suivant :

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

Une solution antérieure, suggérée dans le fil de discussion sur les noms de composants dynamiques React/JSX, a entraîné une erreur de compilation en raison de différences de syntaxe. Comme alternative, une méthode distincte pourrait être créée pour chaque composant :

newExampleComponent() {
    return <ExampleComponent />;
}

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

Cependant, cette approche nécessite une nouvelle méthode pour chaque composant, ce qui peut être fastidieux.

Heureusement, il existe une solution plus élégante qui consiste à transmettre le type de composant sous forme de chaîne à la fonction React.createElement(). Cette fonction restitue le composant en utilisant le type fourni. Par exemple :

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

Ce code se compile en :

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

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!