React点击图片切换显示/隐藏FarmStakingCard组件实现方案问询

你需要新增状态变量记录当前要展示的卡片类型，再给卡片加上条件渲染逻辑即可，修改后的完整代码如下：

// 首先引入useState，如果已经引入可跳过
import { useState } from 'react'

const YourComponent = () => {
  // 新增状态，默认展示第一个CAKE卡片，可根据需求调整初始值
  const [activeCard, setActiveCard] = useState('CAKE')

  // 原有的showCakeStats、showCake2Stats函数无作用，可直接删除

  return (
    <>
      <HorizontalBlock>
        <img 
          src={logoCake}  
          width={100} 
          height={100} 
          onClick={() => setActiveCard('CAKE')}
          alt="cake logo"
        />
        <img 
          src={logoCake2}  
          width={100} 
          height={100} 
          onClick={() => setActiveCard('CAKE2')}
          alt="cake2 logo"
        />
      </HorizontalBlock>
      <br/><br/><br/>
      <div>
        {/* 仅选中CAKE时展示第一个卡片 */}
        {activeCard === 'CAKE' && <FarmStakingCard cakeBalance={cakeBalance} cakePrice={CAKEPrice} />}
        {/* 仅选中CAKE2时展示第二个卡片 */}
        {activeCard === 'CAKE2' && <FarmStakingCard cakeBalance={cake2Balance} cakePrice={CAKE2Price} />}
      </div>
    </>
  )
}

如果你需要初始状态下两个卡片都不展示，把useState的初始值改为null即可。

内容的提问来源于stack exchange，提问作者babou987