如何将其转换为 html 元素？

Question

我正在尝试创建一个突出显示句子中单词的函数。这是相应的代码。

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

在这里，如果我控制台“文本”，我会得到[Object object]，所以我会返回“突出显示”，然后使用reduce加入它。

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

我想在组件中使用这个“text3”。问题是我得到的“text3”为

我希望它是一个 HTML 元素，以便我可以在我的组件中使用它。我该如何转换它？ 另外，如果我直接在网页中显示

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

而不是在我的组件中使用它工作正常。

Answer 1

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

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