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

Posted 2023-02-23

【中文标题】每次单击时显示不同的组件（使用挂钩）

【英文标题】：to display a different component with each click (using hooks)

【发布时间】：2020-11-09 01:00:29

【问题描述】：

我想在每次点击 button 时显示不同的 component。 我确定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>
    )

【参考方案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 函数，说 true 或 false，它会更改您要读取的 flag 变量。

【参考方案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>
  );

【讨论】：

flag ? <Addroom /> : <HomePage /> 这被称为Conditional (ternary) operator 它实际上是编写 if 语句的简写方式。

【参考方案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"));

【讨论】：

谢谢，但我只想使用钩子 (: