Nom de balise dynamic dans jsx et React

J’essaie d’écrire un composant React. pour les balises de titre HTML (h1, h2, h3, etc.), où la priorité de l’en-tête change dynamicment en fonction de la priorité que nous avons définie dans les accessoires.

Voici ce que j’essaie de faire.

Hello

production attendue:

Hello

Cela ne fonctionne pas. Y a-t-il une méthode possible pour cela?

Pas moyen de le faire sur place, il suffit de le mettre dans une variable (avec la première lettre en majuscule):

 const CustomTag = `h${this.props.priority}`; Hello 

Pour être complet, si vous souhaitez utiliser un nom dynamic, vous pouvez également appeler directement React.createElement au lieu d’utiliser JSX:

 React.createElement(`h${this.props.priority}`, null, 'Hello') 

Cela évite d’avoir à créer une nouvelle variable ou un nouveau composant.

Avec des accessoires:

 React.createElement( `h${this.props.priority}`, { foo: 'bar', }, 'Hello' ) 

De la documentation :

Créez et renvoyez un nouvel élément React du type indiqué. L’argument type peut être une chaîne de nom de balise (telle que 'div' ou 'span' ) ou un type de composant React (une classe ou une fonction).

Le code écrit avec JSX sera converti pour utiliser React.createElement() . En React.createElement() générale, vous n’invoquez React.createElement() directement React.createElement() si vous utilisez JSX. Voir React Without JSX pour en savoir plus.

Dans l’instance des en-têtes dynamics (h1, h2 …) , un composant pourrait renvoyer React.createElement (mentionné ci-dessus par Felix ) ainsi.

 const Heading = ({level, children, ...props}) => { return React.createElement(`h${level}`, props , children) } 

Pour la composition, les accessoires et les enfants sont passés.

Voir exemple

Vous pouvez append quelque chose comme ceci:

 render(){ let yourDynamicTag = $yourTag return ( 
{yourDynamicTag}
) }