想要在點擊添加按鈕后呈現不同的組件

Question

我想在單擊 UMUIMAdditionalCoverage.js 中的“添加”按鈕時呈現 VehicleInfoRender.js

應用程序.js

import './App.css';

const App = () => {
  return (
    <BasicLayout />
  );
}

export default App;

Answer 1

使用 state（例如： isShowVehicleInfoRender ）來處理打開/關閉渲染此組件

Answer 2

首先添加一個 state 來管理切換VehicleInfoRender

state = { activeIndex: 0,  showVehicleInfo: false}

然后添加一個 function 來切換顯示和隱藏組件

<Button onClick={this.toggleVehicleInfo}>Add</Button>

const toggleVehicleInfo = () => {
 this.setState((prevState) => {showVehicleInfo: !prevState.showVehicleInfo});
};

最后將其添加到您要渲染組件的位置

{this.state.showVehicleInfo && <VehicleInfoRender />}