Cómo detener la representación de un componente de React

Cómo detener la representación de un componente de React — Amit Merchant — Un blog sobre PHP, JavaScript, etc.

En React, cuando no desea que un componente se renderice en función de alguna condición, puede buscar un cortocircuito para obtener el mismo resultado.

Compruebe el siguiente ejemplo.

import Header from "./Header";

export default function App() {
  const shouldRender = true;

  return (
    <>
      {shouldRender && <Header />}
      <div className="App">
        <h1>App Body</h1>
        <h2>This is app body</h2>
      </div>
    </>
  );
}

Como puedes ver, el Header el componente se mostrará si el shouldRender variable es true y no regresará si el shouldRender variable es false. Funciona bien, pero recientemente aprendí que hay otra forma de lograr el mismo resultado.

De regreso null del componente

En React puedes regresar null de un componente para indicar que no debería representar nada. Así que podemos modificar el ejemplo anterior para volver null de Header componente si el shouldRender variable es false De este modo.

Para ello, podemos pasar shouldRender como accesorio para Header componer así.

import Header from "./Header";

export default function App() {
  const shouldRender = true;

  return (
    <>
      <Header shouldRender={shouldRender} />
      <div className="App">
        <h1>App Body</h1>
        <h2>This is app body</h2>
      </div>
    </>
  );
}

Y luego podemos ajustar el Header componente a devolver null si la shouldRender el accesorio es false De este modo.

export default function Header({ shouldRender }) {
  if (!shouldRender) {
    return null;
  }

  return (
    <div className="App">
      <h1>App Header</h1>
    </div>
  );
}

Mucho más limpio que un cortocircuito, ¿no?

Configuré un CodeSandbox para demostrar lo mismo.

Si quieres conocer otros artículos parecidos a Cómo detener la representación de un componente de React puedes visitar la categoría Código.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas