每次点击显示不同的组件（使用挂钩） [英] to display a different component with each click (using hooks)

问题描述

我想通过单击每个按钮显示一个不同的组件。
我确定语法是错误的，有人可以帮助我吗？浏览器无法加载
我想解释我哪里出错了

I want to display a different component with each button click. I'm sure the syntax is wrong, can anyone help me? The browser doesn't load I would love an explanation of where I went wrong

一个组件（而不是 Home ）应在点击按钮后显示在 App组件上。帮助我了解正确的方法。

One component (instead of HomePage) should display on the App component after clicking the button. Help me to understand the right method.

谢谢！

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, setFlage] = useState(false);



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

      <button onClick={()=>{setFlage({flag:true})}}>Addroom</button>
      <button onClick={()=>{setFlage({flag:false})}}>HomePage</button>


      {setState({flag}) && (
        <div><Addroom  index={i}/></div>
      )}
      {!setState({flag}) && (
        <div><HomePage index={i}/></div>
      )}
    </div>
  )
}
export default App;

Homepage

import React from 'react'

export default function HomePage() {
    return (
        <div>
            HomePage
        </div>
    )
}

添加空间

import React from 'react'

export default function Addroom() {
    return (
        <div>
            Addroom
        </div>
    )
}

推荐答案

尝试以下操作。

function App() {
  const [flag, setFlage] = useState(false);

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

      <button
        onClick={() => {
          setFlage(true);
        }}
      >
        Addroom
      </button>
      <button
        onClick={() => {
          setFlage(false );
        }}
      >
        HomePage
      </button>
      {flag ? <Addroom /> : <HomePage /> }
      
    </div>
  );
}

这篇关于每次点击显示不同的组件（使用挂钩）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！