Comment utiliser React/JSX pour attendre le chargement de React avant le chargement des styles ?
P粉106301763
2023-09-01 00:24:34
<p>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. </p>
<p>Comment puis-je systématiquement éviter cela/me protéger contre ces problèmes ? </p>
<p>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 ;
</p>
<pre class="brush:php;toolbar:false;">// 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) => <span>{number}</span>);
//aucune de ces œuvres
// document.getElementById('title').style.color = ('rgba(0, 0, 0, 0.0)');
// document.getElementById('titre').style.color = "#ffFFff"
retour (
<h1 id='title'>{listItems}</h1>
)
}</pré>
<p>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. </p>
Pour ajouter des styles en ligne aux éléments React, vous devez utiliser l'attribut style. Comme ça :
Vous ne pouvez pas accéder aux éléments DOM rendus sur le corps du composant, vous devez utiliser ref et
useEffect
à cet effet.