Нажимая кнопку HomePage, я хочу показать один компонент, а нажав кнопку Cart, я хочу показать другой компонент (используя логическое значение) - PullRequest
Новая
       140

Нажимая кнопку HomePage, я хочу показать один компонент, а нажав кнопку Cart, я хочу показать другой компонент (используя логическое значение)

0 голосов
/ 12 июля 2020

, нажав кнопку HomePage, я хочу показать компонент HomePage, а нажав кнопку Cart, я хочу показать компонент Cart. В моем DevTools приложение не распознает компонент корзины ... и если я нажимаю на одну из кнопок, он просто остается по умолчанию, который является HomePage (но он распознает логический ответ, который является ложным, когда его HomePage, и истинным, когда его Корзина), почему не переключается на компонент Корзина по нажатию на кнопку? кажется, что я правильно соединил компоненты, а также функцию, которая выполняет действие. поймите, прежде чем двигаться дальше ... (также без роутеров и крючков! (: спасибо!)

Большое спасибо всем!

Приложение. 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>
       
     
       )
     
     }
    }

Домашняя страница. js

import React from 'react'


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

Корзина. js

import React from 'react'

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

Ответы [ 2 ]

1 голос
/ 12 июля 2020

Измените свой 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>
       
     
       )
     
     }
 }
0 голосов
/ 12 июля 2020

Привет, не могли бы вы использовать функцию показа как таковую this.state.flag 

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