1
votes

Le rendu conditionnel ReactJS ne fonctionne pas

J'ai une entrée et chaque fois qu'un utilisateur clique dans la case, je veux voir si l'entrée est supérieure à 1

render() {
const { query } = this.state;

return (
  <div>
    {optionValue > 1 ? (
      <div className="loading">
        ) : (
      <div className="not-loading">
    )}
      <NewSearch query={query} updateQuery={this.updateQuery} />
    </div>
    <Debounce ms={1000}>
      <BusInfo query={query} />
    </Debounce>
  </div>
);
 }

Ensuite, je veux faire ce qui suit dans render / return:

  updateQuery(e) {
   this.setState({ query: e.target.value });

   const optionValue = e.target.value.length;

  }

Mais j'obtiens ce problème:

Ligne 48: 6: Erreur d'analyse: jeton inattendu;

et mon application a gagné " t run.

Que me manque-t-il ici?

J'ai lu ce document:

https://reactjs.org/docs/conditional-rendering.html

Aide!

p >

reactjs

2 commentaires

Je suppose qu'à part les points mentionnés dans les réponses par d'autres, vous pouvez simplement le faire parce que tout ce que vous voulez faire est de changer le nom de classe conditionnellement ainsi:

1? "chargement": "non-chargement"> ...

En dehors de la première erreur, vous obtiendrez également une erreur pour optionValue , car elle n'est pas accessible sur votre rendu . Cette valeur devrait également faire partie de votre état. Vérifiez ma réponse ci-dessous, où j'analyse ces deux problèmes.

3 Réponses :

1
votes

Ne définissez pas de balise HTML comme le composant react

Modifiez ceci

   {optionValue > 1 ? (
      <div className="loading">True condition</div>
        ) : (
      <div className="not-loading">False condition</div>
    )}

0 commentaires

0
votes

Vos balises d'ouverture et de fermeture ne correspondent pas, vous avez une fermeture
Si les divs rendus conditionnellement n'ont aucun contenu, c'est bien, mais ils doivent se fermer automatiquement: (notez le de fermeture /> )

Cela devrait maintenant fonctionner correctement (même si vous devrez peut-être faire this.optionValue)

updateQuery(e) {
 this.setState({ query: e.target.value });

  this.optionValue = e.target.value.length;
}

render() {
  const { query } = this.state;

  return (
    <div>
      <div>
        {this.optionValue > 1 ? (
          <div className="loading" />
        ) : (
            <div className="not-loading" />
          )}
        <NewSearch query={query} updateQuery={this.updateQuery} />
      </div>
      <Debounce ms={1000}>
        <BusInfo query={query} />
      </Debounce>
    </div>
  );
}

3 commentaires

Salut Aron, cela a du sens. J'ai utilisé le code fourni et maintenant j'obtiens: Ligne 23:11: 'optionValue' reçoit une valeur mais n'a jamais utilisé no-unused-vars Ligne 31:10: 'optionValue' n'est pas définie

Ouais, c'est parce que si vous voulez utiliser optionValue dans votre méthode de rendu, vous devez le rendre disponible, il ne peut pas simplement le trouver par magie à partir d'une autre fonction. Placez-le sur le composant comme this.optionValue = e.target.value.length et accédez-y comme this.optionValue? ...: ...

Merci Aron pour vos réponses et votre aide :)

1
votes

Il semble que la seule chose que vous devez modifier en fonction d'une certaine valeur de optionValue est le className du div.

Par conséquent, vous pouvez faire quelque chose comme ceci:

<div className={`myClass1 myClass2 ${optionValue > 1 ? 'loading' : 'not-loading'}`}>

De plus, optionValue est une const de updateQuery et n'est pas accessible plus tard sur votre rendu . Vous devez également ajouter optionValue sur votre état:

const { query, optionValue } = this.state;

Et plus tard sur votre rendu:

updateQuery(e) {
   this.setState({ 
     query: e.target.value,
     optionValue: e.target.value.length
   });
}

ou vérifiez simplement votre rendu query.length au lieu de conserver une nouvelle valeur juste pour cela sur votre état.

Si vous avez des classes que vous souhaitez partager dans les deux cas, vous pouvez utiliser des des littéraux de modèle pour y parvenir:

return (
  <div>
    <div className={optionValue > 1 ? 'loading' : 'not-loading'}>
      <NewSearch query={query} updateQuery={this.updateQuery} />
    </div>
    <Debounce ms={1000}>
      <BusInfo query={query} />
    </Debounce>
  </div>
);

3 commentaires

Michalis, merci c'est parfait, j'ai encore une question. Donc, le className avec la condition. J'ai besoin d'ajouter quelques autres classes dans mais pas dans le conditionnel juste normal css classées comme

Contenu

- Comment fait-on cela? Merci :)

Mise à jour de ma réponse pour cette dernière partie :)

Merci gentil monsieur, c'est parfait et en fait, à partir de vos extraits de code, je viens de solidifier ma connaissance de réaction si énorme merci, les conditions sont un peu plus claires pour moi maintenant. Parfois, je trouve les documents de réaction un peu déroutants! Acclamations :)