Representación condicional de reacción


En React, puede renderizar componentes condicionalmente.

Hay varias maneras de hacer esto.


ifDeclaración

Podemos usar el ifoperador de JavaScript para decidir qué componente renderizar.

Ejemplo:

Usaremos estos dos componentes:

function MissedGoal() {
  return <h1>MISSED!</h1>;
}

function MadeGoal() {
  return <h1>Goal!</h1>;
}

Ejemplo:

Ahora, crearemos otro componente que elija qué componente representar en función de una condición:

function Goal(props) {
  const isGoal = props.isGoal;
  if (isGoal) {
    return <MadeGoal/>;
  }
  return <MissedGoal/>;
}

ReactDOM.render(
  <Goal isGoal={false} />,
  document.getElementById('root')
);

Intenta cambiar el isGoalatributo a true:

Ejemplo:

ReactDOM.render(
  <Goal isGoal={true} />,
  document.getElementById('root')
);


w3schools CERTIFIED . 2022

¡Obtener la certificación!

¡Complete los módulos de React, haga los ejercicios, tome el examen y obtenga la certificación w3schools!

$95 INSCRÍBETE

&&Operador lógico

Otra forma de renderizar condicionalmente un componente de React es usando el &&operador.

Ejemplo:

Podemos incrustar expresiones de JavaScript en JSX usando llaves:

function Garage(props) {
  const cars = props.cars;
  return (
    <>
      <h1>Garage</h1>
      {cars.length > 0 &&
        <h2>
          You have {cars.length} cars in your garage.
        </h2>
      }
    </>
  );
}

const cars = ['Ford', 'BMW', 'Audi'];
ReactDOM.render(
  <Garage cars={cars} />,
  document.getElementById('root')
);

Si cars.length es igual a verdadero, la expresión posterior &&se representará.

Intenta vaciar la carsmatriz:

Ejemplo:

const cars = [];
ReactDOM.render(
  <Garage cars={cars} />,
  document.getElementById('root')
);


Operador Ternario

Otra forma de renderizar elementos condicionalmente es usando un operador ternario.

condition ? true : false

Volveremos al ejemplo de la meta.

Ejemplo:

Devuelve el MadeGoalcomponente si isGoales true, de lo contrario devuelve el MissedGoalcomponente:

function Goal(props) {
  const isGoal = props.isGoal;
  return (
    <>
      { isGoal ? <MadeGoal/> : <MissedGoal/> }
    </>
  );
}

ReactDOM.render(
  <Goal isGoal={false} />,
  document.getElementById('root')
);

Para obtener más información, consulte la sección del operador ternario .


Ponte a prueba con ejercicios

Ejercicio:

Use el operador lógico correcto para completar el siguiente componente.

function App({isLoggedIn}) {
  return (
    <>
      <h1>My Application</h1>
      {isLoggedIn  <Profile /> }
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));