使用useState控制react-audio-player默认静音，如何修改为点击才触发静音？

问题根源 #

• react-audio-player的muted属性接收布尔值，你传入的字符串"True"、"false"属于非空字符串，在JS中会被隐式转换为true，导致播放器始终处于静音状态。
• 原有逻辑写反：你写的muted={ismute ? "false": "True"}相当于ismute为false的时候给muted传真值，刚好和你要的ismute控制静音的逻辑相反。
• 状态命名不统一，setOpen对应ismute可读性差，建议同步命名。

修改后完整代码 #

import React, { useState } from "react";
import ReactAudioPlayer from "react-audio-player";

const Test = () => {
  // 初始值false代表默认不静音，符合需求
  const [isMute, setIsMute] = useState(false);
  return (
    <>
      <div>
        <ReactAudioPlayer
          controls
          // 直接传布尔值，isMute为true就静音，false就不静音
          muted={isMute}
          src='https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'
          loop
          autoPlay
         />
      </div>
      <button onClick={() => setIsMute(!isMute)}>点击切换静音</button>
    </>
  );
};

export default Test

核心修改点 #

1. 把muted属性的传入值从字符串改成直接使用布尔类型的状态变量，避免隐式类型转换导致的逻辑错误。
2. 修正状态逻辑，isMute为true时直接触发静音，符合直觉。
3. 统一状态命名，提升代码可读性。

内容的提问来源于stack exchange，提问作者彩虹一號