React：如何在点击时显示一个不同的组件🏠 回到主页通过告诉React在你点击某个东西时显示另一个组件来切换组件的

通过告诉React在你点击某个东西时显示另一个组件来切换组件的可见性

在许多情况下，你想在屏幕内显示一个完全不同的组件，当一个按钮或链接被点击时。

例如，考虑到一个导航结构。

你怎么能这样做呢？

在这个例子中，我在App组件中集中管理状态。

import React from 'react'

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

export default AddTripButton

然后在App组件中，通过给它分配triggerAddTripState 方法来处理addTrip事件。

<AddTripButton addTrip={this.triggerAddTripState} />

使用React钩子，首先导入useState。

import { useState } from 'react'

然后声明一个 "state "变量。

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

在JSX中，你根据这个状态值来显示和隐藏不同的组件。

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

  return (
    <div>
      {state === 'start' && (
        <AddTripButton addTrip={() => setState('add-trip') } />
      )}

      {state === 'add-trip' && <AnotherComponent />}
    </div>
  )
}