1
votes

Rendu conditionnel dans React; est-ce LA manière?

Je regardais juste dans React pour le comparer à mon framework de référence Vue et j'essayais de rendre conditionnellement un bouton. Quand j'ai regardé comment faire cela, j'ai fait ceci:

import React from 'react'

export default class LikeButton extends React.Component {
  constructor(props) {
    super(props)
    this.state = { likes: 0 }
  }

  render() {
    return (
      <div>
        <button onClick={this.increment}>
          Likes: {this.state.likes}
        </button>
        {
          this.state.likes > 0 ? (
            <button onClick={this.reset}>
              Unlike
            </button>
          ) : ('')
        }
      </div>
    )
  }

  increment = () => this.setState({ likes: this.state.likes + 1 })
  reset     = () => this.setState({ likes: 0 })
}

Est-ce VRAIMENT la voie à suivre? J'ai l'impression que la syntaxe est très très moche, au moins par rapport à Vue avec ses directives v-if et v-show. Ou y a-t-il un meilleur moyen d'y parvenir de manière propre?


0 commentaires

4 Réponses :


4
votes

Vous pouvez rendre le rendu conditionnel un peu plus agréable en utilisant && au lieu de l'opérateur conditionnel:

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class="react"></div>
const Unlike = ({ setLikes }) => (
  <button onClick={() => setLikes(0)}>
    Unlike
  </button>
);
const App = () => {
  const [likes, setLikes] = React.useState(0);
  return (
    <div>
      <button onClick={() => setLikes(likes + 1)}>
        Likes: {likes}
      </button>
      {
        likes > 0 && <Unlike setLikes={setLikes} />
      }
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('.react'));

Mais une amélioration encore meilleure IMO serait d'utiliser un composant fonctionnel au lieu de jouer avec des objets et des méthodes de prototype, cela rend les choses beaucoup plus concises:

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class="react"></div>
const App = () => {
  const [likes, setLikes] = React.useState(0);
  return (
    <div>
      <button onClick={() => setLikes(likes + 1)}>
        Likes: {likes}
      </button>
      {
        likes > 0 && (
          <button onClick={() => setLikes(0)}>
            Unlike
          </button>
        )
      }
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('.react'));

Si vous avez plusieurs zones avec une logique conditionnelle, vous pouvez les séparer en composants séparés pour plus de lisibilité:

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class="react"></div>
class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { likes: 0 }
  }

  render() {
    return (
      <div>
        <button onClick={this.increment}>
          Likes: {this.state.likes}
        </button>
        {
          this.state.likes > 0 && (
            <button onClick={this.reset}>
              Unlike
            </button>
          )
        }
      </div>
    )
  }

  increment = () => this.setState({ likes: this.state.likes + 1 })
  reset     = () => this.setState({ likes: 0 })
}
ReactDOM.render(<App />, document.querySelector('.react'));


1 commentaires

Très cool! Je vois que React est très flexible dans la manière dont vous pouvez l'utiliser :). Merci pour la clarification



2
votes

Pour la plupart oui. Vous pouvez cependant simplifier l'instruction, vous pouvez utiliser le && logique au lieu de l'opérateur ternaire ? si vous souhaitez afficher les données uniquement en condition et rien dans l'autre.

render() {
  if (isFetchingData) {
     return <Loader />
  }

  return (
    <div>
      My component
    </div>
  )
}

De plus, je tiens à souligner que bien que ce ne soit pas directement un cas d'utilisation pour votre exemple, vous pouvez renoncer au rendu optionnel si bloque dans le retour en ayant plusieurs retours dans le rendu (par exemple, un exemple réel avec loader)

this.state.likes > 0 && (
   <button onClick={this.reset}>Unlike</button
)

Mais sur une note plus personnelle, je pense vraiment que vous vous habituerez à la syntaxe. Ce n'est probablement pas aussi élégant à première vue que la vue, mais cela vous permet en fait d'avoir une logique plus puissante dans la méthode de rendu en séparant clairement javascript du html.


0 commentaires

2
votes

Pour le rendu en ligne, vous pouvez faire

<div>
  <button onClick={this.increment}>Likes: {this.state.likes}</button>
  {like}
</div>;

ou dans votre fonction de rendu

let like = null;
if (this.state.likes > 0) {
    like = <LogoutButton onClick={this.handleLogoutClick} />;
} 

puis

{
  this.state.likes > 0 &&
  <button onClick={this.reset}>Unlike</button>;
}

Personnellement, je préfère le second mais c'est à vous

plus d'infos ici


0 commentaires

0
votes

La principale beauté de react vient lorsque vous commencez à diviser votre code en fonctions. Vous pouvez donc avoir une fonction appelée renderButton() et la laisser décider quoi rendre.

renderButton = () => {
// all code logic here
 if(this.state.likes > 0){
   return (<button>Unlike</button>)
 }
  return (<></>)
}

alors dans la fonction de rendu, vous pouvez simplement { this.renderButton }

vous pouvez également faire condition && statement .

Vous pouvez également lire sur les composants purs qui ne contiennent que l'interface utilisateur et la logique est écrite dans un autre composant. Il existe de nombreuses façons d'écrire un code beau et propre dans React.

Le principal problème est qu'il est facile de démarrer avec react et donc de nombreux nouveaux développeurs commenceront à écrire du code difficile à lire.

J'ai également oublié de mentionner les crochets qui rendent l'écriture beaucoup plus propre et plus facile.


0 commentaires