如何根据react js中的点击功能显示图标[重复]答案

【问题标题】：How to show the icons based on the click function in react js [duplicate]如何根据react js中的点击功能显示图标[重复]
【发布时间】：2021-11-16 02:26:42
【问题描述】：

这是组件之一

const [mic, setMic] = useState(false)

const micClick = () => {
  setMic(true)
 alert('micClicked',mic)
}

<VideoControls
   micClick={micClick}
/>

这是其他组件

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

 return (
    <Card style={style} className={classes.root}>
      <Button>
        <MicIcon style={iconStyle} onClick={micClick} />
      </Button>
      <Button>
         <MicOffIcon style={iconStyle} onClick={micClick} />
    </Button>
  }

我想在单击按钮时将MicIcon 显示为默认值，我想将其更改为MicOffIcon，但在这里我不知道如何使用它。请帮助我提前谢谢

【问题讨论】：

reactjs.org/docs/conditional-rendering.html

标签： reactjs

【解决方案1】：

由于您有一个麦克风状态，您可以将其传递下去，然后根据该状态呈现您喜欢的任何图标，例如：

const [mic, setMic] = useState(false)

const micClick = () => {
  setMic(true)
 alert('micClicked',mic)
}
<VideoControls
   micClick={micClick}
   mic={mic}
/>

然后在您的 VideoControls 组件中：

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

 return (
    <Card style={style} className={classes.root}>
      <Button>
         {mic ? 
        <MicIcon style={iconStyle} onClick={micClick} /> : 
        <YourOtherIcon/> }
      </Button>
      <Button>
         <MicOffIcon style={iconStyle} onClick={micClick} />
    </Button>
  }

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

【讨论】：

【解决方案2】：

将mic 作为道具传递给您的VideoControls 组件。并根据mic的值设置你的图标。

const [mic, setMic] = useState(false)

const micClick = () => {
  setMic(mic => !mic); // change the value of mic 
  alert('micClicked',!mic)
}

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

VideoControls 组件

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

 return (
    <Card style={style} className={classes.root}>
      {mic ? 
      <Button>
        <MicIcon style={iconStyle} onClick={micClick} />
      </Button>
       :
      <Button>
         <MicOffIcon style={iconStyle} onClick={micClick} />
      </Button>
     }
  }

【讨论】：

【解决方案3】：

您可以将 mic 状态变量传递给 VideoControls 组件并根据其值显示相关图标：

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

和

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

 return (
    <Card style={style} className={classes.root}>
      <Button>
        {mic ? 
          <MicIcon style={iconStyle} onClick={micClick} /> :
          <MicOffIcon style={iconStyle} onClick={micClick} />
        }
      </Button>
    </Card>
 );

【讨论】：