Modification dynamique du tag de composant React

Question

Je crée une page de destination pour un projet et souhaite réduire mon code en créant une fonction d'aide pour afficher mes quatre composants de papier différents. Tout semble fonctionner correctement sauf pour afficher mes composants Icon qui sont dans les papiers.

Quand je console icône du journal est le texte correct, mais le composant ne figure pas sur la page et je reçois ces deux avertissements pour chaque balise de composant:

"Warning: The tag <CardTravelIcon> is unrecognized in this browser. If you 
meant to render a React component, start its name with an uppercase letter." 

et

"Warning: <CardTravelIcon /> is using uppercase HTML. Always use lowercase 
HTML tags in React." 

Si je viens de coder en dur dans CardTravelIcon ou l'un des trois autres noms de composants dans ce format exact au lieu d'utiliser l'icône de ma fonction de carte, tout fonctionne comme prévu. Ci-dessous le code pour ma fonction d'assistance:

class Landing extends Component { 
    renderPapers() { 
    const classes = this.props.classes; 
    return _.map(infoPapers, ({ description, Icon }) => { 
     return (
     <Grid item xs={6} sm={3} key={Icon}> 
      <Paper className={classes.paper}> 
      <Icon className={classes.paperIcons} /> 
      {description} 
      </Paper> 
     </Grid> 
    ); 
    }); 
    } 

Je suis à perte et apprécie toute aide. Je vous remercie.

Answer 1

Donc, vous voulez passer un composant en tant que variable, non?

Disons que vous avez cette composante CardTravelIcon minimale:

const CardTravelIcon = (props) => (
    <div className={ props.className }>Card Travel Icon</div> 
); 

Et infoPapers données comme celle-ci (Icon est une référence au composant):

const infoPapers = [ 
{ 
    description: "Paper 1 description", 
    Icon : CardTravelIcon 
}]; 

Vous ne nous montrent le infoPapers données, mais je soupçonne que vous essayez de passer une chaîne en tant que composant, par exemple { Icon : "<CardTravelIcon />" } et attendez-vous à ce qu'il fonctionne comme si vous définissiez innerHTML (rendu HTML à partir d'une chaîne). Ce n'est pas le cas dans React, le code JSX doit d'abord être transmis aux appels React.CreateElement, et cela n'est pas fait en analysant les chaînes.

Si vous passez des références à tout les composants doivent être rendus très bien avec la méthode suivante rendu (note: lodash retirée en faveur de la méthode de carte native, pour plus de clarté):

class Landing extends React.Component { 
    render() { 
    return infoPapers.map(({ description, Icon }, idx) => { 
     return (
     <div key={ idx }> 
      <Icon /> 
      {description} 
      </div> 
    ); 
    }); 
    } 
}; 

Voici un exemple de travail: https://jsfiddle.net/svygw338/