Question

我正在尝试在component点击中显示button，我需要在syntax中进行哪些更改？
有人知道错误在哪里吗？这些功能有效，但不是我需要的，自上一个问题display a different component with each button click

起，我已经取得了进步

我真的很想了解正确的方法和简单的方法

谢谢！

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，请跳过作为道具的传递

看看这个样本 sample

单击按钮显示组件（使用挂钩）

1 个答案: