如何修改React Hook useSound返回的回调函数别名以避免变量名冲突

正确写法 #

ES6 对象解构重命名的语法为{ 原有属性名: 自定义别名 }，你之前的写法将原有属性名和自定义别名顺序写反，且误用了类型断言用的as语法，才会导致重命名失效。
useSound 调用后返回数组的第二项是方法集合，其中停止播放的原生方法名固定为stop，你要把它重命名为stopPhone的话，写法如下：

import play from "./assets/play.mp3";
// 将原生stop方法重命名为stopPhone
const [playPhone, { stop: stopPhone }] = useSound(play);

后续调用停止方法时直接使用stopPhone()即可。

注意：上述示例中修正了原代码的笔误，将useSound(phone)修改为useSound(play)，和你导入的音频资源名保持一致，你可以根据自己的实际资源变量名调整。

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