Comment le convertir en élément HTML ?

Question

J'essaie de créer une fonction qui met en évidence les mots dans une phrase. Voici le code correspondant.

highlightText = () => {
        const {
            questionItem,
        } = this.props;
        const words = questionItem.split(/\s+/);
        const highlighted = words.map((word, index) => (
            <span key={index} className="highlighted-word">{word}</span>
        ));
        const text = highlighted.join(' ');
        console.log(text);
        console.log({ highlighted });
        return highlighted;
    }

Ici, si je console "texte", j'obtiens [Object object], donc je renvoie "highlight" puis j'utilise réduire pour le rejoindre.

const text3 = <p>{this.highlightText().reduce((prev, curr) => [prev, ' ', curr])}</p>;

Je souhaite utiliser ce "text3" dans un composant. Le problème est que j'obtiens "text3" comme

Je veux que ce soit un élément HTML pour pouvoir l'utiliser dans mon composant. Comment puis-je le convertir ? De plus, si j'affiche

{this.highlightText().reduce((prev, curr) => [prev, ' ', curr])}

{this.highlightText().reduce((prev, curr) => [prev, ' ', curr])}

directement dans la page Web plutôt que dans mon composant Cela fonctionne bien lors de l'utilisation de . 🎜

Answer 1

Créez simplement un nouveau composant avec props. Essayez ceci...

export default function HighlightText({text}) {
 return <span className="Add_HighlightText_Class" >{text}</span>