React中如何通过点击函数切换展示MicIcon与MicOffIcon图标

原有代码问题 #

• 点击函数仅固定将mic状态设为true，没有实现状态切换逻辑
• 父组件未将mic状态传递给子组件，子组件无法感知当前麦克风状态做展示切换
• 子组件冗余渲染两个按钮，无需拆分多个按钮承载切换逻辑

修改方案 #

1. 调整父组件逻辑 #

• 改造点击函数实现状态反转切换
• 将mic状态作为prop传入VideoControls子组件
  父组件代码示例：

const [mic, setMic] = useState(false)

const micClick = () => {
  // 基于前一次状态做反转，实现切换效果
  setMic(prev => !prev)
}

<VideoControls
   mic={mic}
   micClick={micClick}
/>

2. 调整子组件逻辑 #

• 新增接收mic参数
• 用条件渲染动态展示对应图标，点击事件绑定在Button上可扩大触发范围，优化交互体验
  子组件代码示例：

const VideoControls = ({ 
   mic,
   micClick,
 }) => {

 return (
    <Card style={style} className={classes.root}>
      <Button onClick={micClick}>
        {/* 初始mic为false，默认展示MicIcon，点击后状态切换为MicOffIcon */}
        {!mic ? <MicIcon style={iconStyle} /> : <MicOffIcon style={iconStyle} />}
      </Button>
    </Card>
  )
}

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