스타일이 로드되기 전에 React/JSX를 사용하여 React가 로드될 때까지 기다리는 방법은 무엇입니까?

Question

js/jsx/react를 사용할 때 이 문제가 계속 발생합니다. 페이지가 로드되기 전에 논리가 실행되고 있으므로 페이지 로드가 완료되기 전에 실행하려고 하면 내 코드가 아닌 것에 대한 오류가 계속 발생합니다. 오류가 많습니다.

이 문제를 지속적으로 방지하거나 이러한 문제로부터 자신을 보호하려면 어떻게 해야 합니까?

여러 가지 window.onload() 함수를 사용해 보았지만 그것은 옳지 않은 것 같고 이 작업을 수행하는 더 좋은 방법이 있어야 한다고 생각합니다. 인터넷 검색이나 검색으로는 찾을 수 없습니다. 양식에 기재하세요.< !-- p-->

// 내 문제의 예는 다음 코드에서 지속적으로 오류가 발생하는 것입니다.
함수 제목() {
    var text = "안녕하세요";
    var arr = [];
    //단어를 문자 배열로 변환
    for (let i=0; i<=text.length; i++){
        console.log("루프")
        arr.push(text.charAt(i));
    }
    //각 문자를 범위로 출력합니다.
    const listItems = arr.map((number) => <span>{number}</span>);

//이 둘 다 작동하지 않습니다
    // document.getElementById('title').style.color = ('rgba(0, 0, 0, 0.0)');
    // document.getElementById('title').style.color = "#ffFFff"

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

내가 자주 겪는 버그는 jsx가 선언한 스타일이 "존재하지 않는다"고 변경/액세스하려고 선언했지만 브라우저 콘솔에서 변경하려고 하면 제대로 작동한다고 반응하는 것입니다.< /p>

Answer 1

React 요소에 인라인 스타일을 추가하려면 style 속성을 사용해야 합니다. 이렇게:

으아악

구성 요소 본문에 렌더링된 DOM 요소에 액세스할 수 없습니다. 이 목적을 위해서는 ref 및 useEffect를 사용해야 합니다.