Rendu conditionnel React

Dans React, vous pouvez créer différents composants pour encapsuler les divers comportements dont vous avez besoin. Ensuite, en fonction des changements de l'état de l'application, vous pouvez n'en rendre que certains.

Le rendu conditionnel dans React fonctionne de la même manière qu'en JavaScript. Utilisez des opérateurs JavaScript comme if ou l'opérateur conditionnel pour créer des éléments représentant l'état actuel, puis laissez React mettre à jour l'interface utilisateur en fonction de ceux-ci.

Tout d'abord, examinons deux composants :

function UserGreeting(props) {
  return <h1>欢迎回来!</h1>;
}

function GuestGreeting(props) {
  return <h1>请先注册。</h1>;
}

Nous allons créer un composant Greeting qui affiche l'un d'eux selon que l'utilisateur est connecté :

Exemple React

function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return <UserGreeting />; } return <GuestGreeting />; } const root = ReactDOM.createRoot(document.getElementById("root")); root.render( //Essayez de modifier isLoggedIn={true} : <Greeting isLoggedIn={false} /> );

Essayez-le »

Variables d'éléments

Vous pouvez utiliser des variables pour stocker des éléments. Cela peut vous aider à afficher conditionnellement une partie du composant pendant que le reste de la sortie ne change pas.

Dans l'exemple suivant, nous allons créer un composant à état nommé LoginControl.

Il affichera en fonction de l'état actuel<LoginButton />ou<LogoutButton />, et il affichera également le ... de l'exemple précédent.<Greeting />。

Exemple React

class LoginControl extends React.Component { constructor(props) { super(props); this.handleLoginClick = this.handleLoginClick.bind(this); this.handleLogoutClick = this.handleLogoutClick.bind(this); this.state = {isLoggedIn: false}; } handleLoginClick() { this.setState({isLoggedIn: true}); } handleLogoutClick() { this.setState({isLoggedIn: false}); } render() { const isLoggedIn = this.state.isLoggedIn; let button = null; if (isLoggedIn) { button = <LogoutButton onClick={this.handleLogoutClick} />; } else { button = <LoginButton onClick={this.handleLoginClick} />; } return ( <div> <Greeting isLoggedIn={isLoggedIn} /> {button} </div> ); } } const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <LoginControl /> );

Essayez-le »

Opérateur ET &&

Vous pouvez intégrer n'importe quelle expression dans JSX en l'entourant d'accolades, y compris l'opérateur logique ET && de JavaScript, qui peut commodément effectuer un rendu conditionnel d'un élément.

Exemple React

function Mailbox(props) { const unreadMessages = props.unreadMessages; return ( <div> <h1>Bonjour!</h1> {unreadMessages.length > 0 && <h2> Vous avez{unreadMessages.length}messages non lus. </h2> } </div> ); } const messages = ['React', 'Re: React', 'Re:Re: React']; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <Mailbox unreadMessages={messages} /> );

Essayez-le »

En JavaScript,true && expressionrenvoie toujoursexpression, tandis quefalse && expression renvoie toujoursfalse。

Par conséquent, si la condition esttrue，&&l'élément à droite sera rendu ; si elle estfalse, React l'ignorera et le sautera.

Opérateur ternaire

Une autre méthode de rendu conditionnel consiste à utiliser l'opérateur conditionnel de JavaScript :

condition ? true : false.

Dans l'exemple suivant, nous l'utilisons pour afficher conditionnellement un petit morceau de texte.

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

Il peut également être utilisé dans des expressions plus grandes, bien que ce ne soit pas très intuitif :

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <LogoutButton onClick={this.handleLogoutClick} />
      ) : (
        <LoginButton onClick={this.handleLoginClick} />
      )}
    </div>
  );
}

Empêcher le rendu d’un composant

Dans de rares cas, vous pouvez vouloir masquer un composant même s’il est rendu par un autre composant. Vous pouvez le faire en faisant en sorte que la méthode render retourne null au lieu de son résultat de rendu.

Dans l’exemple suivant,<WarningBanner />le composant est rendu conditionnellement en fonction de la valeur de la prop warn. Si la valeur de warn est false, le composant ne sera pas rendu :

Exemple React

function WarningBanner(props) { if (!props.warn) { return null; } return ( <div className="warning"> Warning! </div> ); } class Page extends React.Component { constructor(props) { super(props); this.state = {showWarning: true} this.handleToggleClick = this.handleToggleClick.bind(this); } handleToggleClick() { this.setState(prevState => ({ showWarning: !prevState.showWarning })); } render() { return ( <div> <WarningBanner warn={this.state.showWarning} /> <button onClick={this.handleToggleClick}> {this.state.showWarning ? 'Masquer' : 'Afficher'} </button> </div> ); } } const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <Page /> );

Essayez-le »

Le fait de renvoyer null depuis la méthode render d'un composant n'affecte pas les callbacks des méthodes de cycle de vie du composant. Par exemple, componentWillUpdate et componentDidUpdate peuvent toujours être appelés.

Autres extensions