如何使用React/JSX在样式加载完成之前等待React的加载？

Question

我一直遇到这个问题，在使用 js/jsx/react 时，我一直遇到这个问题，我的逻辑在页面加载之前运行，因此，我一直遇到错误，以及什么不是我的代码尝试在页面加载完成之前执行，从而导致大量错误。

我如何始终如一地防止这种情况/防止自己遇到这些问题？

我尝试过使用一堆 window.onload() 函数，但这感觉不对，我觉得应该有更好的方法来做到这一点，“我无法通过谷歌搜索或在表单上找到。

// 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 来实现此目的。