Elementos de alternancia de construcción, como mostrar/ocultar componentes,ganchos de palanca, obotones de alternar— es una característica común con la que probablemente te encuentres al crear aplicaciones web. Dependiendo de la cantidad de opciones, pueden ser un contenedor simple para representación condicional o un componente más robusto con capacidad de personalización.
En este tutorial, vamos a ver cómo podemos construir un componente mostrar/ocultar personalizable llamadoAlternar visibilidadusandoGanchos de reacción.
Obtener acceso a300+consejos web 💌
Mejora tus habilidades y domina el arte del desarrollo front-end con tutoriales breves.
No hacemos spam. Darse de baja en cualquier momento.
¿Buscas mejorar tus habilidades? Consulta nuestro curso interactivo para dominar React de principio a fin.
Cómo funcionará ToggleVisibility#
Primero, echemos un vistazo a lo que queremos lograr. Queremos tener un componente llamadoAlternar visibilidad, que envuelve cualquier cantidad de elementos y agrega un botón de alternancia. También queremos personalizarlo de algunas maneras:
<Alternar visibilidad> <h1>Con la configuración predeterminadah1>Alternar visibilidad><Alternar visibilidad Mostrar etiqueta="👀" ocultar etiqueta="🙈"> <h1>Con etiquetas personalizadash1>Alternar visibilidad><Alternar visibilidad visible={FALSO}> <h1>Con visibilidad predeterminadah1>Alternar visibilidad><Alternar visibilidad eliminarBoton={verdadero} visible={FALSO}> <h1>Cambio de una sola vezh1>Alternar visibilidad>Cómo funcionará ToggleVisibility
¡Copiado al portapapeles!
El componente vendrá con cuatro accesorios diferentes para lograr una funcionalidad diferente. En orden, son:
Mostrar etiqueta: La etiqueta del botón para activar el componente. El valor predeterminado es "Mostrar".ocultar etiqueta: La etiqueta del botón para desactivar el componente. El valor predeterminado es "Ocultar".eliminarBoton: un valor booleano para decidir si eliminar el botón después de la interacción para un cambio único. De forma predeterminada, esto se establecerá enFALSO.visible: Un valor booleano para decidir la visibilidad predeterminada delniños. De forma predeterminada, esto se establecerá enverdadero, es decir, los elementos dentroAlternar visibilidadserá visible inicialmente.
🔐 Hazte miembrooaccesopara obtener acceso al código fuente completo en una sola pieza. También se incluyen tipos de TypeScript.
Creación del componente con funcionalidad Mostrar/Ocultar#
Para comenzar, primero creemos la funcionalidad básica de alternar que mostrará/ocultará elementos secundarios. Para esto, todo lo que necesitamos es unuseStategancho que renderiza condicionalmenteniños:
importarReaccionar, {useState} de 'reaccionar'constante Alternar visibilidad = ({niños}) => { constante [espectáculo,establecerMostrar] = useState(verdadero) devolver ( <Reaccionar.Fragmento> {espectáculo&&niños} <botón al hacer clic={() => establecerMostrar(!espectáculo)}> {espectáculo? 'Esconder' : 'Espectáculo'} botón> Reaccionar.Fragmento> )}exportar por defectoAlternar visibilidadToggleVisibility.tsxActivar y desactivar contenido
¡Copiado al portapapeles!
Tenga en cuenta que envolver todo en un fragmento nos permite evitar contaminar el DOM. Si necesita estilos personalizados, se pueden reemplazar con undivisión.
Para usar el componente, simplemente envuelva un elemento dentroAlternar visibilidaddespués de importarlo. En este momento, tenemos etiquetas estáticas con visibilidad establecida enverdaderopor defecto. Cada vez que hagamos clic en el botón, se configurará elespectáculoestado a su opuesto, lo que alternará elniñosen línea: 8. Esto funciona perfectamente para algunos casos de uso simples, pero veamos cómo agregar etiquetas y establecer la visibilidad predeterminada.
Adición de etiquetas personalizables y visibilidad#
Para hacer que las etiquetas sean configurables, necesitamos introducir dos accesorios más:Mostrar etiquetayocultar etiqueta. Extender elAlternar visibilidadcomponente con las partes resaltadas:
constanteAlternar visibilidad= ({Mostrar etiqueta= 'Espectáculo',ocultar etiqueta= 'Esconder',niños}) => { constante [espectáculo,establecerMostrar] = useState(verdadero) devolver ( <Reaccionar.Fragmento> {espectáculo&&niños} <botón al hacer clic={() => establecerMostrar(!espectáculo)}> {espectáculo?ocultar etiqueta:Mostrar etiqueta} botón> Reaccionar.Fragmento> )ToggleVisibility.tsxAdición de etiquetas configurables
¡Copiado al portapapeles!
Ahora el componente también acepta etiquetas personalizadas para mostrar/ocultar. Usandoparámetros predeterminados, podemos decirle a React que trate los accesorios como opcionales. En caso de que no se proporcionen, los valores por defecto serán "Mostrar" y "Ocultar". No olvide actualizar también la etiqueta dentro de labotón.
También queremos manejar la visibilidad predeterminada, por lo que inicialmente podemos tener un componente oculto. Para lograr esto, agregue un accesorio más llamadovisibleal componente:
const AlternarVisibilidad = ({ ...+visible = verdadero, niños}) => {-const [mostrar, establecerMostrar] = usarEstado(verdadero)+const [mostrar, establecerMostrar] = useState(visible) devolver (...)}ToggleVisibility.tsxAdición de visibilidad predeterminada al componente
¡Copiado al portapapeles!
Observe que el valor predeterminado deuseStatePara elespectáculoel estado ha sido cambiado deFALSOavisible. Así es como el estado y los accesorios pueden trabajar juntos. Ahora también podemos indicarle al componente que se oculte de forma predeterminada. Esta propiedad también aprovecha los parámetros predeterminados.
🔐 Hazte miembrooaccesopara obtener acceso al código fuente completo en una sola pieza. También se incluyen tipos de TypeScript.
Conmutadores de una sola vez#
Hay una última cosa que nos falta, y es agregar la posibilidad de alternar una sola vez. Esta opción solo nos permitirá alternar elementos una vez, luego el botón se eliminará del DOM. Para lograr esto, necesitamos otrouseStategancho:
constante Alternar visibilidad = ({ ...eliminarBoton= FALSO}:ToggleAccesorios de visibilidad) => { constante [botón mostrar,establecerShowButton] = useState(verdadero) constante alternar visibilidad = () => { establecerMostrar(!espectáculo)eliminarBoton&& establecerShowButton(FALSO) } devolver ( <Reaccionar.Fragmento> {espectáculo&&niños} {botón mostrar&& ( <botón al hacer clic={alternar visibilidad}> {espectáculo?ocultar etiqueta:Mostrar etiqueta} botón> )} Reaccionar.Fragmento> )}ToggleVisibility.tsxAgregar la capacidad de hacer cambios de una sola vez
¡Copiado al portapapeles!
Por defecto, su valor debe serverdadero, para que el botón siempre esté visible inicialmente. Sólo actualizamos este valor aFALSO(en línea: 9), si eleliminarBotonprop está configurado paraverdadero. De esta manera, tan pronto como se haga clic en el botón, se eliminará del DOM. Amantener el código limpio, podemos organizar la funcionalidad del botón en una función separada llamadaalternar visibilidad.
Obtener acceso a300+consejos web 💌
Mejora tus habilidades y domina el arte del desarrollo front-end con tutoriales breves.
No hacemos spam. Darse de baja en cualquier momento.
¿Buscas mejorar tus habilidades? Consulta nuestro curso interactivo para dominar React de principio a fin.
Conclusión#
Y dicho esto, ahora tiene un componente mostrar/ocultar completamente personalizable listo para usar en su proyecto. Construir componentes de alternancia en React es solo una cuestión de usaruseStateanzuelos con los accesorios adecuados.
¿Tienes alguna pregunta sobre el proyecto? ¡Comparte tus pensamientos en los comentarios a continuación! Si desea obtener más información sobre React, consulte nuestro proyecto anterior donde puede aprender a validar formularios en React. ¡Gracias por leer, feliz codificación! 👨💻
Cómo validar fácilmente formularios en ReactUso de objetos de validaciónAprenda a validar fácilmente sus formularios en React de manera declarativa con la ayuda de objetos de validación.