1
votes

Puis-je utiliser un modèle littéral dans une balise JSX?

Je souhaite essentiellement que des composants variables soient rendus à l'intérieur d'un composant que je crée qui varient en fonction de l'entrée fournie par un utilisateur dans le prop, mais je veux éviter les instructions if inutiles, etc. .

Serais-je capable de faire ça? Par exemple, si l'accessoire weather est défini par l'utilisateur comme Sun , alors <{weather}/> sera identique à .

javascript reactjs jsx

2 commentaires

les composants doivent commencer par une majuscule, vous pouvez const Component = weather; puis l'utiliser comme

Est-ce que cela résout votre question stackoverflow.com/questions/29875869/ …

3 Réponses :

1
votes

Vous ne pouvez pas vraiment mélanger la syntaxe JSX avec les littéraux de template (bien que n'importe où dans JSX vous puissiez mettre {une expession js} vous pouvez utiliser un littéral de template, vous ne pouvez pas mettre une expression où un le nom du composant est attendu).

Mais comme Sun n'est qu'une variable avec une valeur qui est un composant, si vous deviez appeler votre accessoire Weather au lieu de weather vous pouvez:

0 commentaires

0
votes

Si weather contient une référence à la fonction Sun , vous pouvez utiliser weather directement (pas via un modèle littéral), mais en bas case JSX supposera que c'est une balise HTML, pas un composant, et le mettra entre guillemets dans l'appel React.creatElement résultant; vous devez donc utiliser une variable initialement plafonnée ( Weather au lieu de weather):

<Weather />

Si weather code > contient la chaîne "Sun" , vous ne pouvez pas l'utiliser directement pour créer un élément Sun ; vous avez besoin d'une référence à la fonction Sun , pas d'une chaîne. Vous avez besoin d'un moyen pour passer de la chaîne à la fonction (un objet sur lequel le rechercher, une Map , etc.).

Vous pouvez utiliser des littéraux de modèle ailleurs dans JSX, dans {} , car ceux-ci contiennent des expressions JavaScript. Mais pas pour définir le composant d'une balise.

0 commentaires

3
votes

Dans React, les noms commençant par une majuscule seront compilés avec la méthode createComponent. Donc, avec cela à l'esprit, la solution correcte est d'assigner la valeur du nom à une variable en majuscule (voir ci-dessous).

import React from 'react';

import SunComponent from './sun-component';
import RainComponent from './rain-component';


const WeatherComponents = {
     Sun: SunComponent,
     Rain: RainComponent
};

const WeatherComponent = (props) => {
    const TagName = WeatherComponents[props.weather || 'Sun'];
    return <TagName />
}
export default MyComponent;

Une autre technique que j'aime utiliser consiste à mapper des composants enfants dans un objet. Cela rend le composant plus facile à configurer (et à réutiliser) car seule une clé abrégée est requise au lieu du nom complet du composant.

const WeatherComponent = props => {
  const ComponentTagName = props.weather;

  return <ComponentTagName />
}

0 commentaires