Comment utiliser React/JSX pour attendre le chargement de React avant le chargement des styles ?

Question

Je continue à avoir ce problème lors de l'utilisation de js/jsx/react, ma logique s'exécute avant le chargement de la page et par conséquent, je continue à recevoir des erreurs quant à ce qui n'est pas mon code. J'essaie d'exécuter avant la fin du chargement de la page, ce qui provoque beaucoup d'erreurs.

Comment puis-je systématiquement éviter cela/me protéger contre ces problèmes ?

J'ai essayé d'utiliser un tas de fonctions window.onload() mais cela ne me semble tout simplement pas correct et j'ai l'impression qu'il devrait y avoir une meilleure façon de le faire, que je ne trouve pas en recherchant sur Google ou sur le formulaire.&Lt ;

// un exemple de mon problème est le code suivant qui contient systématiquement des erreurs :
fonction Titre() {
    var texte = "Bonjour" ;
    vararr = [];
    //convertit le mot en un tableau de caractères
    pour (soit i=0; i<=text.length; i++){
        console.log("boucle")
        arr.push(text.charAt(i));
    }
    // affiche chaque lettre dans un span
    const listItems = arr.map((number) => {number});

//aucune de ces œuvres
    // document.getElementById('title').style.color = ('rgba(0, 0, 0, 0.0)');
    // document.getElementById('titre').style.color = "#ffFFff"

    retour (
        
{listItems}
    )
}
Un bug que je reçois souvent est que React prétend que le style déclaré par jsx que j'essaie de modifier/d'accéder "n'existe pas", mais si j'essaie de le modifier dans la console du navigateur, cela fonctionne bien. 
            

Answer 1

Pour ajouter des styles en ligne aux éléments React, vous devez utiliser l'attribut style. Comme ça :

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

Vous ne pouvez pas accéder aux éléments DOM rendus sur le corps du composant, vous devez utiliser ref et useEffect à cet effet.