/

React：如何在點擊時顯示不同的組件

React：如何在點擊時顯示不同的組件

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

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

以導航結構為例，該如何實現呢？

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

1
2
3
4
5
6
7
import React, { useState } from 'react';

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

export default AddTripButton;

然後，在 App 組件中，通過將 addTrip 事件指定為 triggerAddTripState 方法來處理添加旅行的事件：

1
<AddTripButton addTrip={this.triggerAddTripState} />

使用 React hooks，首先導入 useState：

1
import React, { useState } from 'react';

然後聲明一個 “state” 變量：

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

在 JSX 中，根據此狀態值顯示和隱藏不同的組件：

1
2
3
4
5
6
7
8
9
10
11
function App() {
  const [state, setState] = useState('start');

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

tags: [“React”, “component”, “state management”]