通過告訴 React 在點擊某個元素時顯示另一個組件,來切換組件的可見性。

在許多場景中,當點擊按鈕或鏈接時,您希望在屏幕內顯示完全不同的組件。

以導航結構為例,該如何實現呢?

在這個例子中,我們將狀態集中管理在 App 組件中。

import React, { useState } 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 hooks,首先導入 useState:

import React, { 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>
  );
}