Reaccionar: Cómo mostrar un componente diferente al hacer clic

Cambie la visibilidad de los componentes diciéndole a React que muestre otro componente cuando haga clic en algo

En muchos escenarios, desea 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, administro el estado centralizado en el componente Aplicación.

import React from 'react'

const AddTripButton = (props) => { return <button onClick={props.addTrip}>Add a trip</button> }

export default AddTripButton

Luego, en el componente Aplicación, maneje el evento addTrip asignándole eltriggerAddTripStatemétodo:

<AddTripButton addTrip={this.triggerAddTripState} />

Con React hooks, primero importe useState:

import { useState } from 'react'

luego declare una variable de "estado":

const [state, setState] = useState('start')

En JSX, muestra y oculta diferentes componentes en función de este valor de estado:

function App() {
  const [state, setState] = useState('start')

triggerAddTripState = () => { setState(‘add-trip’) }

return ( <div> {state === ‘start’ && ( <AddTripButton addTrip={this.triggerAddTripState} /> )}

  {<span style="color:#a6e22e">state</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">'add-trip'</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">AnotherComponent</span> <span style="color:#f92672">/&gt;</span>}
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>

) }

Con componentes basados en clases, entriggerAddTripStateeditas el estado del componente:

class App extends Component {
  constructor(props) {
    super(props)
    this.state = { isEmptyState: true }
  }

triggerAddTripState = () => { this.setState({ …this.state, isEmptyState: false, isAddTripState: true }) } }

Mira, aquí creo un estado predeterminado, que contieneisEmptyState: true. Cuando eltriggerAddTripStatese ejecuta el método, el estado se edita para que la propiedad se establezca en falso, y un nuevoisAddTripStatepropiedad se establece en verdadero.

Ahora en JSX podemos usar esas 2 propiedades de estado para mostrar y ocultar partes del componente usando esta sintaxis:

render() {
  return (
    <div>
      {this.state.isEmptyState && <AddTripButton addTrip={this.triggerAddTripState} />}
  {<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">state</span>.<span style="color:#a6e22e">isAddTripState</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">AnotherComponent</span> <span style="color:#f92672">/&gt;</span>}
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>

) }

Descarga mi gratisReact Handbook


Más tutoriales de react: