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

由 发布于

当我在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>

如果单击城市按钮，则显示此

  </div>
);

}