Dans React, je veux pouvoir utiliser des mots de style dans une chaîne qui est définie dans une variable à l'aide de littéraux de modèle. Pour cela, j'utilise un style juste pour ce mot. J'obtiens une erreur d'utilisation HTMLIntrinsic.
Remarque - Les solutions données dans SO aux questions liées à cela ne résolvent pas le problème que j'ai. Veuillez vérifier le code.
Comment contourner ce problème
J'ai essayé d'utiliser dangerouslyinsertHTML, mais pas une solution recommandée.
//Actual code
const temperature = "22";
const list = {
item: `The temperature is ${temperature}`
}
//To style it-
const temperature = "22";
const list = {
item: `The temperature is <span style={{color:'red'}}>${temperature}</span>`
}
//And the above list.item is inserted inside JSX like -
return (
<div>{list.item}</div>
)
Le la température (22) doit être stylisée.
3 Réponses :
Au lieu de la chaîne de modèle, vous pouvez utiliser des éléments JSX pour générer du HTML comme d'habitude, placés à côté de vos éléments de texte. Exemple:
item: (
<>
The temperature is
<span style={{color:'red'}}>
{temperature}
</span>
</>
)
J'utilise un Fragment pour encapsulez le texte et les éléments ensemble, mais vous pouvez utiliser quelque chose d'autre comme un div si vous souhaitez également styliser le wrapper.
Vous ne pouvez pas utiliser React dans un template-literal comme ça car le composant React est un objet. Son utilisation avec template-literal se traduira par cet [objet objet] . Je recommande donc d'utiliser une autre manière, par exemple la solution de @richardo
Vous pouvez rendre cela aussi simple que ceci, SI vous êtes d'accord pour ne pas avoir d'objet comme vous l'avez défini
return(
<div>The temperature is <span style={{color: 'red'}}>{temperature}</span></div>
)