Je suis nouveau à réactjs.
J'essaie de comprendre la relation entre la mise à jour de l'état d'un composant et la fonction de rendu.
ci-dessous est ma classe de composants: Lorsque la page Web est lancée pour la première fois, l'élément Ceci est mon processus de pensée, après avoir changé l'état, je veux modifier l'apparence du Puis-je éventuellement écrire de code comme ci-dessous? Cela ne semble pas être logique car il existe déjà une fonction appelée mais je ne sais pas comment modifier cette ligne, puis-je éventuellement ajouter un paramètre à cette fonction? Toutes les directives aideront beaucoup! Merci! 4 Réponses : Mais je suis coincé ici. Comment puis-je renoncer à l'élément div?
réactjs renouille automatiquement des objets modifiés après avoir appelé la fonction Dans votre fonction de rendu, vous souhaitez ajouter la classe en fonction de l'état. ou la méthode de nettoyage, comme @Ramjan suggéré. Lorsqu'un état est modifié, Chaque fois que l'état est changé, le rendu () est appelé automatiquement de sorte que vous ne devez pas le rendre vous-même p> dans votre cas, il suffit d'appliquer le nom de classe en fonction de une certaine valeur dans l'état p> Ici, j'ai fabriqué une fonction qui renvoie une chaîne qui doit être utilisée comme nom de classe p> Notez que j'ai appelé getclass , non seulement sa référence, il fonctionne donc chaque fois que le rendu est appelé et renvoyer une chaîne qui sera utilisée comme nom de classe p> mais faire une fonction n'est pas nécessaire
Donc, vous mettez également le code directement dans Render () comme: p> Remarque: vous pouvez également raccourcir le tel que: P> Il vous suffit d'utiliser votre état à l'intérieur de la fonction de rendu et de rendu automatiquement lorsque l'état est modifié. Définissez votre nom de classe en fonction de l'état quelque chose comme ça: utilise le style de la classe CSS
cellule . J'ai la définition CSS créée dans un autre fichier. Lorsque le est cliqué,
FLIDCELL est appelé. À l'intérieur de cette fonction, je change l'état avec SetState . en modifiant le nom
classname vers une autre classe CSS que je définirai. Mais je suis coincé ici. Comment «rendu» le div élément? rendu () à l'intérieur du code ... Est-ce que je change cette ligne du code alors? :
0 commentaires
0
votes
SSTATE () Fonction.
0 commentaires
0
votes
rendu code> est appelé automatiquement. Il vous suffit d'écrire une condition dans la méthode code> de rendu code> pour modifier le nom de la classe en fonction de l'état actuel.
Par exemple - class Cell extends React.Component {
constructor(props) {
super(props);
this.state = { cellValue: "empty" };
}
fillCell = (player) => {
if (player == 'x') {
this.setState({ cellValue: "x" });
} else if (player == 'o') {
this.setState({ cellValue: "o" });
}
}
render() {
const { cellValue } = this.state;
const divClass = cellValue === 'x' ? 'xClassName' : 'oClassName';
return <div onClick={() => this.fillCell('x')} className={divClass}></div>;
}
}
export default Cell;
0 commentaires
0
votes
render() {
const class1 = "some-style";
const class2 = "some-other-style";
return <div onClick={() => this.fillCell("x")} className={this.state.cellValue === "x" ? class1 : class2}></div>;
}
0 commentaires
0
votes
0 commentaires