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

单击主页按钮，我想显示组件主页，单击购物车按钮，我想显示组件购物车。 在我的DevTools中，应用程序无法识别购物车组件。。如果我点击其中一个按钮，它只是停留在默认的主页上（但它是识别布尔值的答案，当它的主页为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>
       
     
       )
     
     }
    }
     

import React，{Component}来自“React”
导入“/App.css”；
从“./components/Cart.js”导入购物车
从“./components/HomePage.js”导入主页
导出默认类应用程序扩展组件{
陈述={
旗帜：假
}
show=（）=>{
if（this.flag==true）{
返回(
)
}
否则{
返回(
)
}
}
//////
render（）{
返回(
{this.setState（{flag:true}}}>Cart
{this.setState（{flag:false}}}>主页
{this.show（）}
)
}
}

主页.js

import React from 'react'


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

从“React”导入React
导出默认函数主页（）{
返回(
H
)
}

Cart.js

import React from 'react'

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

从“React”导入React
导出默认函数Cart（）{
返回(
C
)
}

您好，您是否可以使用此.state.flag的显示功能

show=（）=>{
if（this.state.flag==true）{
返回(
);
}否则{
返回(
);
}
};

更改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}来自“React”
导入“/App.css”；
从“./components/Cart.js”导入购物车
从“./components/HomePage.js”导入主页
导出默认类应用程序扩展组件{
陈述={
旗帜：假
}
render（）{
返回(
{this.setState（{flag:true}}}>Cart
{this.setState（{flag:false}}}>主页
{this.state.flag&&(
)
}
{！this.state.flag&&(
)
}
)
}
}

您也可以尝试以下方式：

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

import React，{Component}来自“React”
导入“/App.css”；
从“./components/Cart.js”导入购物车
从“./components/HomePage.js”导入主页
导出默认类应用程序扩展组件{
陈述={
旗帜：假
}
常量显示=（）=>{
如果（此.state.flag）{
返回
}
否则{
返回
}
render（）{
返回(
{this.setState（{flag:true}}}>Cart
{this.setState（{flag:false}}}>主页
{this.show}
)
}
}

你能试试下面的解决方案并告诉我它是否有效吗谢谢你，它有效，你能解释一下你在这里做了什么更改吗？函数应该声明为

const show=（）=>{

而不是

show=（）={

因为您需要在

返回内部调用

。同样，在调用函数期间，您应该只调用变量，而不是函数。这意味着，它应该是

{this.show（）}

，而不是

{this.show}

这是我的荣幸。希望我能帮上忙谢谢。很高兴答案对我有帮助，而且效果很好。我在这里试过了。效果不错。你能检查一下吗

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