如何使用React/JSX在樣式載入完成之前等待React的載入？

Question

我一直遇到這個問題，在使用js/jsx/react 時，我一直遇到這個問題，我的邏輯在頁面加載之前運行，因此，我一直遇到錯誤，以及什麼不是我的程式碼嘗試在頁面載入完成之前執行，從而導致大量錯誤。

我如何一致地防止這種情況/防止自己遇到這些問題？

我嘗試過使用一堆window.onload() 函數，但這感覺不對，我覺得應該有更好的方法來做到這一點，“我無法通過谷歌搜索或在表單上找到。< !-- p-->

// an example of my issue is the following code consistently errors:
function Title() {
    var text = "Hello";
    var arr = [];
    //convert word into an array of chars
    for (let i=0; i<=text.length; i ){
        console.log("loop")
        arr.push(text.charAt(i));
    }
    //output each letter into a span
    const listItems = arr.map((number) => <span>{number}</span>);

//neither of these work
    // document.getElementById('title').style.color = ('rgba(0, 0, 0, 0.0)');
    // document.getElementById('title').style.color = "#ffFFff"

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

我經常遇到的錯誤是，react 聲稱我嘗試更改/訪問 jsx 聲明的樣式“不存在”，但如果我嘗試在瀏覽器的控制台中更改它，它工作正常.

Answer 1

要將內聯樣式新增至 React 元素，您應該使用 style 屬性。這樣：

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

您無法存取在元件主體上呈現的 DOM 元素，您應該使用 ref 和 useEffect 來實現此目的。