通過告訴 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>
);
}