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) => ( {word} )); 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 = 
{this.highlightText().reduce((prev, curr) => [prev, ' ', curr])}
;

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 .

export default function HighlightText({text}) { return {text}