Renderizado condicional de React

En React, puedes crear diferentes componentes para encapsular los diversos comportamientos que necesites. Luego, también puedes renderizar solo una parte de ellos según los cambios de estado de la aplicación.

El renderizado condicional en React es igual que en JavaScript. Usa operadores de JavaScript como `if` o el operador condicional para crear elementos que representen el estado actual, y luego deja que React actualice la interfaz de usuario según ellos.

Veamos primero dos componentes:

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

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

Crearemos un componente `Greeting` que mostrará uno de ellos según si el usuario ha iniciado sesión o no:

Ejemplo de React

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

Pruébalo »

Variables de elemento

Puedes usar variables para almacenar elementos. Esto te ayuda a renderizar condicionalmente una parte del componente, mientras que el resto de la salida no cambia.

En el siguiente ejemplo, vamos a crear un componente con estado llamado `LoginControl`.

Renderizará según el estado actual<LoginButton />o<LogoutButton />, y también renderizará los del ejemplo anterior.<Greeting />。

Ejemplo de 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 /> );

Pruébalo »

Operador Y &&

Puedes incrustar cualquier expresión en JSX envolviéndola con llaves, incluido el operador lógico Y (&&) de JavaScript, que permite renderizar condicionalmente un elemento de manera conveniente.

Ejemplo de React

function Mailbox(props) { const unreadMessages = props.unreadMessages; return ( <div> <h1>Hello!</h1> {unreadMessages.length > 0 && <h2> Tiene{unreadMessages.length}mensajes sin leer. </h2> } </div> ); } const messages = ['React', 'Re: React', 'Re:Re: React']; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <Mailbox unreadMessages={messages} /> );

Pruébalo »

En JavaScript,true && expressionsiempre devuelveexpression, mientras quefalse && expression siempre devuelvefalse。

Por lo tanto, si la condición estrue，&&el elemento de la derecha se renderizará, y si esfalse, React lo ignorará y lo omitirá.

Operador ternario

Otra forma de renderizado condicional es usar el operador condicional de JavaScript:

condition ? true : false.

En el siguiente ejemplo, lo usamos para renderizar condicionalmente un pequeño fragmento de texto.

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

También se puede usar en expresiones más grandes, aunque no es muy intuitivo:

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

Evitar que el componente se renderice

En raras ocasiones, es posible que desees ocultar un componente incluso si fue renderizado por otro componente. Para lograrlo, haz que el método `render` devuelva `null` en lugar de su resultado de renderizado.

En el siguiente ejemplo,<WarningBanner />se renderiza condicionalmente según el valor de la propiedad `warn`. Si el valor de `warn` es `false`, el componente no se renderizará:

Ejemplo de React

function WarningBanner(props) { if (!props.warn) { return null; } return ( <div className="warning"> ¡Advertencia! </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 ? 'Ocultar' : 'Mostrar'} </button> </div> ); } } const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <Page /> );

Pruébalo »

Que el método `render` de un componente devuelva `null` no afecta las devoluciones de llamada de los métodos del ciclo de vida del componente. Por ejemplo, `componentWillUpdate` y `componentDidUpdate` aún se pueden invocar.

Otras extensiones