单击一个页面上的按钮时如何显示不同的组件？

Question

当我在 App.js 的渲染功能中单击带有 OnClick 的按钮时，我试图显示不同的组件。

我想在单击按钮时显示某个组件并隐藏其他组件。

这是我想做的一个例子

    return (
      <div className={styles.container}>
        <img className={styles.image} src={image} alt="COVID-19" />

      //If the Country Button which is the default is clicked show This 

          <ThemeProvider theme = {theme}>
            <CountryPicker handleCountryChange={this.handleCountryChange} />
            <CountryCards CountryData = {CountryData} CountryYesterdayData = {CountryYesterdayData}/>
            </ThemeProvider>
            <Chart countrydailydata ={countrydailydata} />

    //If the State Button is clicked show this 

    <ThemeProvider theme= {theme}>
            <StatePicker handleStateChange={this.handleStateChange} />
            <StateCards stateData= {stateData} yesterdayStateData = {yesterdayStateData}/>

          </ThemeProvider> 
    //If the City Button is clicked show this 
            <CityPicker handleCityChange={this.handleCityChange}/>
          <CityCard cityData = {cityData}/>
      </div>
    );

Answer 1

import React from 'react';
import logo from './logo.svg';
import './App.css';




function Statepicker(){
  return(
    <div>Statepicker</div>
  )
}

function Statecards(){
  return(
    <div>Statecards</div>
  )
}

function Countrypicker(){
  return(
    <div>Countrypicker</div>
  )
}

function Countrycards(){
  return(
    <div>Countrycards</div>
  )
}

class ThemeProvider extends React.Component{
  
  constructor(props){
     super(props);
     this.state={country:true,states:false}
     
  }

  renderCountryOrState=()=>{
    if(this.state.states){
      return(<React.Fragment>
        <Statepicker/>
        <Statecards/>
      </React.Fragment>)
    }
    return (
      <React.Fragment>
        <Countrypicker/>
        <Countrycards/>
      </React.Fragment>
    )
  }

  render(){
    return(
       <div>
         <button onClick={(e)=>{this.setState({country:true,states:false})}}>Select country</button>
         <button onClick={(e)=>{this.setState({country:false,states:true})}}>Select state</button>
         {this.renderCountryOrState()}
       </div>
    )
  }

}


function App() {
  return (
    <ThemeProvider/>
  );
}

export default App;

Answer 2

import React from "react";

import { Button, View } from "react-native";
import styles from "./App.module.css";
import {View} from 'react-native'

import image from "./images/covid1.png";

class App extends React.Component {
  constructor(props){
      super(props);
      state = {

        CityButton: false,
        StateButton: false,
        CountryButton: false
      };
  }

  render() {

    { CountryButton, StateButton, CityButton } = this.state;

    return (
   <view>
      <div className={styles.container}>
        <img className={styles.image} src={image} alt="COVID-19" />

        <Button title="Country Mode" onPress={() => 
           this.setState({CountryButton: true}
           )} />

        <Button title="State Mode" onPress={() => 
           this.setState({StateButton: true}
           )} />

        <Button title="County Mode" onPress={() => 
           this.setState({CityButton: true}
           )} />

        {CountryButton && <div> Hello </div>}

        {StateButton && <div> Hello </div>}

        {CityButton && <div> Hello </div>}
      </div>
</view>
    );
  }
}

export default App;