在按鈕單擊中顯示組件（使用掛鈎）

Question

我正在嘗試在button單擊中顯示component ，我需要更改syntax什么？
任何人都明白錯誤在哪里？ 這些功能有效，但不是我需要的，自從上一個問題在這里顯示每個按鈕單擊時顯示不同的組件以來，我已經取得了進展

好想明白正確簡單的方法

謝謝！

應用程序.js

import React, {useState} from 'react';
import './App.css';
import Addroom from './components/Addroom.js'
import HomePage from './components/HomePage.js'

function App() {

  const [flag, setFlag] = useState(false);



  return (
    <div className="App">
     
     <h1>My Smart House</h1>


      <button className="button1" onClick={()=>setFlag(!flag)}>Change Flag</button>
      {flag.toString()}

      <Addroom a={(!flag)}/>
      <HomePage h={(flag)}/>

</div>

  )
}
export default App;

主頁.js

import React from 'react'

export default function HomePage(props) {
    return (
        <div>
           <h2> HomePage {props.h}</h2>
        </div>
    )
}

Addroom.js

import React from 'react';


export default function Addroom(props) {
    return (
        <div>
           <h2> Addroom {props.a}</h2>
        </div>
    )
}

Answer 1

使用條件運算符condition? exprIfTrue: exprIfFalse condition? exprIfTrue: exprIfFalse

   {flag ? <Addroom /> : <HomePage /> }

如果您不需要在組件內使用flag ，請跳過作為道具傳遞

看看這個樣本