Wie kann ich mit React/JSX auf das Laden von React warten, bevor Stile geladen werden?

Question

Ich habe immer wieder dieses Problem, wenn ich js/jsx/react verwende. Meine Logik wird ausgeführt, bevor die Seite geladen wird, und daher erhalte ich immer wieder Fehlermeldungen darüber, was nicht mein Code ist. Ich versuche, ihn auszuführen, bevor die Seite vollständig geladen ist viele Fehler.

Wie beuge ich dem konsequent vor bzw. schütze mich vor diesen Problemen?

Ich habe versucht, eine Reihe von window.onload()-Funktionen zu verwenden, aber das fühlt sich einfach nicht richtig an und ich denke, es sollte einen besseren Weg geben, dies zu tun, den ich beim Googeln oder auf Google nicht finden kann das Formular.< !-- p-->

// Ein Beispiel für mein Problem ist der folgende Code, der ständig Fehler aufweist:
Funktion Title() {
    var text = "Hallo";
    var arr = [];
    //Wort in ein Array von Zeichen umwandeln
    for (let i=0; i<=text.length; i++){
        console.log("loop")
        arr.push(text.charAt(i));
    }
    //Jeden Buchstaben in einen Bereich ausgeben
    const listItems = arr.map((number) => <span>{number}</span>);

//keines davon funktioniert
    // document.getElementById('title').style.color = ('rgba(0, 0, 0, 0.0)');
    // document.getElementById('title').style.color = "#ffFFff"

    zurückkehren (
        <h1 id='title'>{listItems}</h1>
    )
}

Ein Fehler, den ich oft bekomme, ist, dass React behauptet, dass der von jsx deklarierte Stil, den ich ändern/auf den ich zugreifen möchte, „nicht existiert“, aber wenn ich versuche, ihn in der Konsole des Browsers zu ändern, funktioniert es einwandfrei.

Answer 1

要将内联样式添加到 React 元素，您应该使用 style 属性。这样：

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

您无法访问在组件主体上呈现的 DOM 元素，您应该使用 ref 和 useEffect 来实现此目的。