Reagovat podmíněné vykreslování


V Reactu můžete podmíněně vykreslovat komponenty.

Existuje několik způsobů, jak to udělat.


ifTvrzení

K rozhodnutí, kterou komponentu vykreslíme, můžeme použít ifoperátor JavaScriptu.

Příklad:

Použijeme tyto dvě složky:

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

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

Příklad:

Nyní vytvoříme další komponentu, která vybere komponentu k vykreslení na základě podmínky:

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

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

Zkuste změnit isGoalatribut na true:

Příklad:

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


w3schools CERTIFIED . 2022

Získejte certifikaci!

Dokončete moduly React, proveďte cvičení, udělejte zkoušku a získejte certifikaci w3schools!!

95 $ PŘIHLÁSIT SE

Logický &&operátor

Dalším způsobem, jak podmíněně vykreslit komponentu React, je použití &&operátoru.

Příklad:

JavaScriptové výrazy můžeme vložit do JSX pomocí složených závorek:

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')
);

Pokud cars.length se rovná true, &&vykreslí se výraz za.

Zkuste pole vyprázdnit cars:

Příklad:

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


Ternární operátor

Dalším způsobem podmíněného vykreslení prvků je použití ternárního operátoru.

condition ? true : false

Vrátíme se k příkladu cíle.

Příklad:

Vraťte MadeGoalkomponentu, pokud isGoalje true, jinak vraťte MissedGoalkomponentu:

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

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

Další informace naleznete v sekci ternární operátor .


Otestujte se pomocí cvičení

Cvičení:

K dokončení následující komponenty použijte správný logický operátor.

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

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