Bagaimana untuk menukarnya kepada elemen html?

Question

Saya cuba mencipta fungsi yang menyerlahkan perkataan dalam ayat. Berikut ialah kod yang sepadan.

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

Di sini, jika saya konsol "teks", saya mendapat [Object object], jadi saya kembalikan "highlight" dan kemudian gunakan reduce untuk menyertainya.

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

Saya mahu menggunakan "text3" ini dalam komponen. Masalahnya ialah saya mendapat "text3" sebagai

Saya mahu ia menjadi elemen HTML supaya saya boleh menggunakannya dalam komponen saya. Bagaimanakah saya boleh menukarnya? Juga, jika saya memaparkan

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

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

terus dalam halaman web dan bukannya dalam komponen saya Ia berfungsi dengan baik apabila menggunakan . 🎜

Answer 1

Hanya buat komponen baharu dengan props. Cuba ini...

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