Question

我想每次点击component来显示不同的button。我确定syntax是错的，有人可以帮助我吗？浏览器无法加载我很想解释我哪里出错了

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

谢谢！

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;

主页

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

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

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进行反应性渲染。（当您使用状态变量并且一旦更改了值，渲染方法将重新生成输出，这样会加载您的条件组件。

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

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

3 个答案: