在按钮点击中显示一个组件（使用钩子）

Question

我正在尝试在 button 单击中显示 component，我需要在 syntax 中更改什么？
任何人都知道错误在哪里？这些功能有效但不是我需要的，自上一个问题以来我已经取得了进步

很想了解正确又简单的方法

谢谢！

App.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;

HomePage.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

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

如果您不需要使用 flag 内部组件，请跳过作为 props 传递

看看这个样本 sample

在按钮点击中显示一个组件（使用钩子）

display a component in button click (using hooks)

javascript

components

reactjs

react-hooks

react-functional-component