Alternar la visibilidad de los componentes diciéndole a React que muestre otro componente cuando haga clic en algo
En muchos escenarios, es posible que desee mostrar un componente completamente diferente dentro de una pantalla cuando se hace clic en un botón o enlace.
Piense en una estructura de navegación, por ejemplo.
¿Cómo puedes hacerlo?
En este ejemplo estoy administrando el estado centralizado en el componente App.
import React from 'react'const AddTripButton = (props) = { return button onClick={props.addTrip}Add a trip/button}export default AddTripButton
Luego, en el componente App, maneja el evento addTrip asignándole el triggerAddTripState
método:
AddTripButton addTrip={this.triggerAddTripState} /
Con los ganchos de React, primero importa useState:
import { useState } from 'react'
Luego declara una variable de “estado”:
const [state, setState] = useState('start')
En JSX se muestran y ocultan diferentes componentes en función de este valor de estado: Moniteurs pc - critiques
function App() { const [state, setState] = useState('start') return ( div {state === 'start' ( AddTripButton addTrip={() = setState('add-trip') } / )} {state === 'add-trip' AnotherComponent /} /div )}
Tal vez te puede interesar:
- Introducción a React
- Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
- Cómo cambiar el valor de un nodo DOM
- Cómo comprobar si un elemento DOM tiene una clase
React: Cómo mostrar un componente diferente al hacer clic
Alternar la visibilidad de los componentes diciéndole a React que muestre otro componente cuando haga clic en algo
programar
es
https://aprendeprogramando.es/static/images/programar-react-como-mostrar-un-componente-diferente-al-hacer-clic-1837-0.jpg
2024-10-28