React useState条件渲染图片如何共享默认图且实现状态互斥

你可以通过改造状态结构和渲染逻辑一次性解决这两个问题，修改后的代码如下：

// 状态改为存储当前激活的按钮标识，初始为null表示没有按钮激活
const [activeBtn, setActiveBtn] = useState(null);

<button onClick={() => {
  setActiveBtn(prev => prev === 'btn1' ? null : 'btn1')
}}>Test1</button>
<button onClick={() => {
  setActiveBtn(prev => prev === 'btn2' ? null : 'btn2')
}}>Test2</button>

{/* 仅用一个img标签处理所有渲染场景 */}
<img 
  src={
    activeBtn === 'btn1' ? test1 
    : activeBtn === 'btn2' ? test2 
    : test3
  } 
  alt="" 
/>

• 针对重复渲染test3的问题：合并了原来的两个条件渲染分支，所有场景共用同一个img标签，自然不会出现重复的test3资源加载和渲染。
• 针对按钮状态互斥的问题：用单个状态存储当前激活的按钮，同一时间只能有一个按钮处于激活态，点击其他按钮时会自动覆盖激活状态，不会出现两个按钮同时为true的情况，同时保留了原有的点击当前激活按钮可取消激活的交互逻辑。

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