Реагировать: как показать другой компонент при нажатии

Переключите видимость компонентов, указав React отображать другой компонент, когда вы что-то щелкаете

Во многих сценариях вы хотите отображать совершенно другой компонент внутри экрана при нажатии кнопки или ссылки.

Подумайте, например, о структуре навигации.

Как это сделать?

В этом примере я централизованно управляю состоянием в компоненте приложения.

import React from 'react'

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

export default AddTripButton

Затем в компоненте App обработайте событие addTrip, присвоив емуtriggerAddTripStateметод:

<AddTripButton addTrip={this.triggerAddTripState} />

С помощью перехватчиков React сначала импортируйте useState:

import { useState } from 'react'

затем объявите переменную «состояния»:

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

В JSX вы показываете и скрываете различные компоненты на основе этого значения состояния:

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>

) }

С компонентами на основе классов вtriggerAddTripStateвы редактируете состояние компонента:

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

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

Смотрите, здесь я создаю состояние по умолчанию, которое содержитisEmptyState: true. КогдаtriggerAddTripStateметод запущен, состояние редактируется так, что для свойства установлено значение false, а новыйisAddTripStateсвойство установлено в значение true.

Теперь в JSX мы можем использовать эти 2 свойства состояния для отображения и скрытия частей компонента с помощью этого синтаксиса:

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>

) }

Скачать мою бесплатнуюСправочник по React


Больше руководств по реакции: