Saltar al contenido

Cómo mostrar y ocultar los componentes de ReactJS

Un componente es una sola unidad, y la combinación de varias unidades crea una aplicación completa. ¿Pero qué pasa si queremos ocultar o mostrar un componente con frecuencia?

Digamos que tenemos un componente llamado Demo1, y queremos esconderlo basándonos en el valor booleano de verdadero/falso. Podemos usar los diferentes operadores condicionales para lograr esta funcionalidad.

Cómo mostrar y ocultar los componentes de ReactJS
Cómo mostrar y ocultar los componentes de ReactJS

Crea tres archivos diferentes llamados Demo1.js, Demo2.js y Demo3.js, y pega las siguientes líneas de código fuente en ellos:

Demo1.js

12345678910111213141516importReact,{Componente}de "reaccionar";classDemo1extiendeComponente{constructor(){super();this.state={ nombre: "Reaccionar"};}render(){retorno<div>Este es el componente Demo1</div>;}}exportdefaultDemo1;

jsx

Demo2.js

12345678910111213141516importReact,{Componente}de "reaccionar";classDemo2extiendeComponente{constructor(){super();this.state={ nombre: "Reaccionar"};}render(){retorno<div>Este es el componente Demo2</div>;}}exportdefaultDemo2;

jsx

Demo3.js

12345678910111213141516importReact,{Componente}de "reaccionar";classDemo3extiendeComponente{constructor(){super();this.state={ nombre: "Reaccionar"};}render(){retorno<div>Este es el componente Demo3</div;;}}exportdefaultDemo3;

jsx

Todos estos archivos son componentes hijos, o componentes independientes que vamos a usar en un componente padre llamado index.js.

Abre el archivo index.js y crea tres variables diferentes en el estado, así..:

123456789constructor(){super();this.state={ nombre: "Reaccionar", showHideDemo1:false, showHideDemo2:false, showHideDemo3:false};}

jsx

En los objetos de estado, tenemos tres variables booleanas diferentes con false como valor por defecto, y estas variables se usarán para mostrar u ocultar el componente específico.

Utilizaremos el operador lógico, (&&), para mostrar los componentes basados en la condición junto con el evento de clic de botón, que se explica en el siguiente ejemplo.

Índice.js

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162importReact,{Componente}de "reaccionar";importar{ renderizar }de "reaccionar-dom";importarDemo1de". /Demo1";importDemo2de"./Demo2";importDemo3de"./Demo3";classAppextendsComponent{constructor(){super();this.state={ name: "React", showHideDemo1:false, showHideDemo2:false, showHideDemo3:false};this. hideComponent=esto.hideComponent.bind(this);}hideComponent(name){console.log(name);switch(name){case "showHideDemo1":this.setState({ showHideDemo1:!this.state. showHideDemo1});break;case "showHideDemo2":this.setState({ showHideDemo2:!this.state.showHideDemo2});break;case "showHideDemo3":this.setState({ showHideDemo3:!this. state.showHideDemo3});break;default:null;}}render(){const{ showHideDemo1, showHideDemo2, showHideDemo3 }=esto. state;return(<div>{showHideDemo1 &&}<hr/{showHideDemo2 &&}<hr/{showHideDemo3 &&}<hr/{showHideDemo3 &}<hr/hr/amp;};div;};buttononClick={()==;this. hideComponent("showHideDemo1")}{{i}; Click para ocultar el componente de la Demo1{i}{i};buttononClick={()={i};this.hideComponent("showHideDemo2")}{i}; Click para ocultar el componente de la Demo2{i}{i}{i}{i1}botón}{i}{i}. hideComponent("showHideDemo3")}}; Click para ocultar el componente Demo3 </button,

jsx

Entendamos cómo funciona este ejemplo.

  • Tenemos tres variables de estado diferentes junto con el valor por defecto.
  • Importamos tres componentes infantiles y utilizamos la condición de que el componente infantil se renderizará sólo si obtenemos un valor verdadero de la variable. Si la condición es verdadera, entonces se renderizará; de lo contrario, no lo hará.
  • Tenemos tres botones diferentes, y al hacer clic en cada uno de ellos, el evento se adjunta utilizando el switch case para cambiar el valor de las variables de estado.
  • El evento de clic se llama hideComponent(), que se utiliza para cambiar los valores de estado basados en el evento de clic del botón junto con el nombre del botón, que decide que el valor de estado específico se actualizará.
12345678910111213switch(name){case "showHideDemo1":this.setState({ showHideDemo1:!this.state.showHideDemo1});break;case "showHideDemo2":this. setState({ showHideDemo2:!this.state.showHideDemo2});break;case "showHideDemo3":this.setState({ showHideDemo3:!this.state.showHideDemo3});break;default:null;}

jsx

A partir del evento de clic en el botón, obtendremos una cadena que identifica qué botón se ha pulsado. En base a la cadena dada, el valor de estado apropiado será actualizado.

Así es como, basándonos en el valor del estado y en la lógica y el operador, podemos mostrar u ocultar los componentes directamente. También son posibles otras formas. Por ejemplo, podemos hacer uso de la lógica no, (!), y la lógica o el operador, (||).

Este es un ejemplo de cómo ocultar o mostrar un componente basado en la condición, pero también es posible ocultar o mostrar elementos. Veamos cómo funciona eso en la siguiente sección de esta guía.