Wie konvertiere ich es in ein HTML-Element?

Question

Ich versuche eine Funktion zu erstellen, die Wörter in einem Satz hervorhebt. Hier ist der entsprechende Code.

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;
    }

Wenn ich hier „Text“ konsole, erhalte ich [Objektobjekt], also gebe ich „Hervorheben“ zurück und verwende dann „Reduzieren“, um es zu verbinden.

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

Ich möchte diesen „text3“ in einer Komponente verwenden. Das Problem ist, dass ich „text3“ als bekomme

Ich möchte, dass es ein HTML-Element ist, damit ich es in meiner Komponente verwenden kann. Wie kann ich es konvertieren? Auch wenn ich

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

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

direkt auf der Webseite statt in meiner Komponente anzeige Bei Verwendung funktioniert es einwandfrei. 🎜

Answer 1

只需创建一个带有 props 的新组件即可。试试这个...

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