通过单击“主页”按钮我想显示一个组件，通过单击“购物车”按钮我想显示另一个组件（使用布尔值）

Question

通过单击“主页”按钮，我想显示组件“主页”，通过单击“购物车”按钮，我想显示组件“购物车”。在我的 DevTools 中，该应用程序无法识别 Cart 组件。如果我单击其中一个按钮，它只会保持默认状态，即 HomePage（但它会识别布尔值答案，当它的 HomePage 时为 false，当它时为 true购物车），为什么点击按钮不切换到购物车组件？看来我以正确的方式连接了组件，还有执行操作的功能。

*对我来说保持简单的方式真的很重要，因为我想在继续之前了解一下......（也没有路由器或挂钩！（：谢谢！ )

非常感谢大家！

App.js

import React, { Component } from 'react'
import './App.css';
import Cart from './components/Cart.js'
import HomePage from './components/HomePage.js'

export default class App extends Component {

  state={

    flag: false
 
   }
 
 
 
 show=()=> {
  if(this.flag===true){
 
return(

  <div> <Cart/> </div>
)
}

  else {

return(

<div> <HomePage/> </div>

)
}

  
}

//////
  render() {
    return (
      <div className="App">
     
     
     
         <button onClick={()=>{this.setState({flag:true})}}>Cart</button>
         <button onClick={()=>{this.setState({flag:false})}}>HomePage</button>
         {this.show()}
     
       </div>
       
     
       )
     
     }
    }

HomePage.js

import React from 'react'


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

Cart.js

import React from 'react'

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

Answer 1

您好，您可以使用 show 函数吗 this.state.flag

  show = () => {
    if (this.state.flag === true) {
      return (
        <div>
          <Cart />
        </div>
      );
    } else {
      return (
        <div>
          <HomePage />
        </div>
      );
    }
  };

Answer 2

像下面这样改变你的App.jsx：

import React, { Component } from 'react'
import './App.css';
import Cart from './components/Cart.js'
import HomePage from './components/HomePage.js'

export default class App extends Component {

  state={

    flag: false
 
   }
 
  render() {
    return (
      <div className="App">
     
     
     
         <button onClick={()=>{this.setState({flag:true})}}>Cart</button>
         <button onClick={()=>{this.setState({flag:false})}}>HomePage</button>
         {this.state.flag && (
               <div><Cart/></div>
              )
         }
         {!this.state.flag && (
               <div><HomePage/></div>
              )
          }
     
       </div>
       
     
       )
     
     }
 }

你也可以试试下面这个：

import React, { Component } from 'react'
import './App.css';
import Cart from './components/Cart.js'
import HomePage from './components/HomePage.js'

export default class App extends Component {

  state={

    flag: false
 
   }
const show=()=> {
  if(this.state.flag){
 
       return <Cart/> 
  }

  else {

       return <HomePage/> 
  }

 
  render() {
    return (
      <div className="App">
     
     
     
         <button onClick={()=>{this.setState({flag:true})}}>Cart</button>
         <button onClick={()=>{this.setState({flag:false})}}>HomePage</button>
         <div>{this.show}</div>
     
       </div>
       
     
       )
     
     }
 }

通过单击“主页”按钮我想显示一个组件，通过单击“购物车”按钮我想显示另一个组件（使用布尔值）

By clicking on HomePage button I want to show one component and by clicking on Cart button I want to show the other component (using boolean value)

boolean

cart

reactjs