每次单击时显示不同的组件（使用挂钩）

Question

我想在每次单击button时显示不同的component 。 我确定syntax是错误的，有人可以帮助我吗？ 浏览器无法加载我希望能解释一下我哪里出错了

单击按钮后，一个组件（而不是HomePage ）应显示在App component上。 帮助我理解正确的方法。

谢谢！

应用程序.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;

主页

import React from 'react'

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

添加房间

import React from 'react'

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

Answer 1

我没有测试它，但我可以看到它应该是这样的：

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

  {flag && (
    <div><Addroom index={i}/></div>
  )}
  {!flag && (
    <div><HomePage index={i}/></div>
  )}

您需要使用 Boolean 的参数调用setFlage Boolean为true或false ，它会更改您要读取的flag变量。

Answer 2

试试下面的。

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>
  );
}

Answer 3

您缺少渲染方法，并且您应该使用 setState 进行反应性渲染。（当您使用 state 变量并且一旦值更改渲染方法将重建 output 因此这将加载您的条件组件。

https://jsfiddle.net/khajaamin/f8hL3ugx/21/

--- HTML

class Home extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <div> In Home</div>;
  }
}

class Contact extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <div> In Contact</div>;
  }
}

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      flag: false,
    };
  }

  handleClick() {
    this.setState((state) => ({
      flag: !state.flag,
    }));
    console.log("hi", this.state.flag);
  }

  getSelectedComp() {
    if (this.state.flag) {
      return <Home></Home>;
    }
    return <Contact></Contact>;
  }
  render() {
    console.log("refreshed");
    return (
      <div>
        <h1>
          Click On button to see Home component loading and reclick to load back
          Contact component
        </h1
        <button onClick={() => this.handleClick()}>Switch Component</button>
        {this.getSelectedComp()}
      </div>
    );
  }
}
ReactDOM.render(<TodoApp />, document.querySelector("#app"));