Bagaimana untuk menggunakan React/JSX untuk menunggu React dimuatkan sebelum gaya dimuatkan?

Question

Saya terus mengalami masalah ini apabila menggunakan js/jsx/react, logik saya berjalan sebelum halaman dimuatkan dan oleh itu, saya terus mendapat ralat tentang apa yang bukan kod saya Cuba untuk melaksanakan sebelum halaman selesai dimuatkan, menyebabkan banyak kesilapan.

Bagaimanakah saya secara konsisten menghalang perkara ini/melindungi diri saya daripada masalah ini?

Saya telah mencuba menggunakan sekumpulan fungsi window.onload() tetapi itu tidak sesuai dan saya rasa ada cara yang lebih baik untuk melakukan ini, yang saya tidak dapat mencari dengan googling atau hidupkan borang.< !-- p-->

// contoh isu saya ialah ralat kod berikut secara konsisten:
fungsi Tajuk() {
    var text = "Hello";
    var arr = [];
    //tukar perkataan ke dalam tatasusunan aksara
    untuk (biar i=0; i<=text.length; i++){
        console.log("gelung")
        arr.push(text.charAt(i));
    }
    //keluarkan setiap huruf ke dalam rentang
    const listItems = arr.map((nombor) => <span>{number}</span>);

// kedua-duanya tidak berfungsi
    // document.getElementById('title').style.color = ('rgba(0, 0, 0, 0.0)');
    // document.getElementById('title').style.color = "#ffFFff"

    kembali (
        <h1 id='title'>{listItems}</h1>
    )
}

Pepijat yang sering saya dapat ialah reaksi yang mendakwa gaya yang diisytiharkan jsx yang saya cuba ubah/akses "tidak wujud", tetapi jika saya cuba menukarnya dalam konsol penyemak imbas, ia berfungsi dengan baik.

Answer 1

Untuk menambah gaya sebaris pada elemen React, anda harus menggunakan atribut gaya. Seperti ini:

<h1 id="title" style={{ color: "#fff" }}>{listItems}</h1>

Anda tidak boleh mengakses elemen DOM yang diberikan pada badan komponen, anda harus menggunakan ref dan useEffect untuk tujuan ini.