React:如何在點擊時顯示其他組件

通過告訴React在您單擊某些內容時顯示另一個組件來切換組件的可見性

在許多情況下,當您單擊按鈕或鏈接時,您希望在屏幕內顯示完全不同的組件。

例如,考慮一下導航結構。

你怎麼能這樣呢?

在此示例中,我管理集中在App組件中的狀態。

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>

) }

免費下載我的反應手冊


更多反應教程: