condicional

En React, puedes renderizar componentes de forma condicional.

Hay varias maneras de hacer esto.

ifDeclaración

Podemos utilizar el ifoperador JavaScript para decidir qué componente renderizar.

Utilizaremos estos dos componentes:

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

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

Ejemplo:

Ahora, crearemos otro componente que elige qué componente renderizar según una condición:

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

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

dfsdf

Intente cambiar el isGoalatributo a true:

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

&&Operador lógico

Otra forma de representar condicionalmente un componente React es mediante el &&operador.

Podemos incrustar expresiones de JavaScript en JSX mediante el uso de 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'];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage cars={cars} />);

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

Intente vaciar la carsmatriz:

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

Operador ternario

Otra forma de representar elementos condicionalmente es mediante el uso de un operador ternario.

condition ? true : false

Volveremos al ejemplo del objetivo.

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

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

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

Para obtener más información, consulte la sección de operadores ternarios .

gy