Javascript 从react use effect/hook导出函数/方法

我有一个wavesurfer ni的实例，这是我的一个项目。 这将动态显示各种音频文件。 我在一个页面上呈现这个，我希望播放和暂停按钮触发wave surfer

我不太明白如何传递这些函数

它们在代码中被标记

提前谢谢

export default function FiddleDisplay({ audioFileUrl }) {
  const waveformRef = React.useRef();
  React.useEffect(() => {
    if (waveformRef.current) {
      const activeWaveColor = '#f5f5f5';
      const playedWaveColor = '#707070';
      const wavesurfer = WaveSurfer.create({
        container: waveformRef.current,
        barWidth: 5,
        cursorWidth: 2,
        waveColor: activeWaveColor,
        progressColor: playedWaveColor,
        hideScrollbar: true,
        autoCenter: false,
        responsive: true,
        width: 100,
        barHeight: 9,
        height: 350,
        interact: true,
        maxCanvasWidth: 2000,
        fillParent: true
      });
      wavesurfer.load(`${audioFileUrl}`);
      wavesurfer.play(); //USE THIS IN OTHER COMPONENT
      wavesurfer.pause(); //USE THIS IN OTHER COMPONENT
    }
  }, []);
  return (
    <>
      <Waveform ref={waveformRef} />
    </>
  );
}

导出默认函数FiddleDisplay（{audioFileUrl}）{
const waveformRef=React.useRef（）；
React.useffect（（）=>{
if（波形参考电流）{
常量activeWaveColor='#f5'；
const playedWaveColor='#707070'；
const wavesurfer=wavesurfer.create({
容器：waveformRef.current，
条宽：5，
游标宽度：2，
waveColor:activeWaveColor，
progressColor:playedWaveColor，
hideScrollbar：是的，
自动中心：false，
回答：是的，
宽度：100，
酒吧高度：9，
身高：350，
是的，
maxCanvasWidth:2000，
家长：对
});
load（`${audioFileUrl}`）；
wavesurfer.play（）；//在其他组件中使用此选项
wavesurfer.pause（）；//在其他组件中使用此选项
}
}, []);
返回(
);
}

您需要使用useState存储对实例的引用，并将相关绑定方法附加到按钮：

export default function FiddleDisplay({
  audioFileUrl,
}) {
  const waveformRef = React.useRef();
  const [waveSurfer, setWaveSurfer] = React.useState();
  React.useEffect(() => {
    if (waveformRef.current) {
      const activeWaveColor = '#f5f5f5';
      const playedWaveColor = '#707070';
      const wavesurfer = WaveSurfer.create({
        container: waveformRef.current,
        barWidth: 5,
        cursorWidth: 2,
        waveColor: activeWaveColor,
        progressColor: playedWaveColor,
        hideScrollbar: true,
        autoCenter: false,
        responsive: true,
        width: 100,
        barHeight: 9,
        height: 350,
        interact: true,
        maxCanvasWidth: 2000,
        fillParent: true
      });
      wavesurfer.load(`${audioFileUrl}`);
      setWaveSurfer(wavesurfer);
    }
  }, []);

  const play = waveSurfer && waveSurfer.play.bind(waveSurfer);
  const pause = waveSurfer && waveSurfer.pause.bind(waveSurfer);
  return (
    <>
      <Waveform ref={waveformRef} />
      <Button onClick={play}>Play</Button>
      <Button onClick={pause}>Pause</Button>
    </>
  );
}

导出默认函数FiddleDisplay({
audioFileUrl，
}) {
const waveformRef=React.useRef（）；
const[waveSurfer，setWaveSurfer]=React.useState（）；
React.useffect（（）=>{
if（波形参考电流）{
常量activeWaveColor='#f5'；
const playedWaveColor='#707070'；
const wavesurfer=wavesurfer.create({
容器：waveformRef.current，
条宽：5，
游标宽度：2，
waveColor:activeWaveColor，
progressColor:playedWaveColor，
hideScrollbar：是的，
自动中心：false，
回答：是的，
宽度：100，
酒吧高度：9，
身高：350，
是的，
maxCanvasWidth:2000，
家长：对
});
load（`${audioFileUrl}`）；
设置wavesurfer（wavesurfer）；
}
}, []);
const play=waveSurfer&&waveSurfer.play.bind（waveSurfer）；
const pause=waveSurfer&&waveSurfer.pause.bind（waveSurfer）；
返回(
玩
暂停
);
}

---

如果您想在其他地方呈现按钮，则需要从父函数传入setter并将绑定方法传递回。

使用

useState

存储对实例的引用，并将其（或其方法的绑定副本）传递到链的下游。非常感谢您！这对我来说有点先进。我真的不知道该怎么做。如何将此添加到按钮的onClick中。我得到一条消息，即呈现此内容的函数的useEffect缺少依赖项setPlayPause。我的浏览器也说setPlayPause不是一个函数。我想这可能是巧合吧？@SaschaRissling我更新了一个更基本的解决方案。如果你想在其他地方渲染按钮，你必须创建一个setter，并通过道具将其传递给FiddleDisplay，但是如果你对FiddleDisplay渲染自己的按钮没有问题，这应该是可行的。Jared非常感谢。在你的大力帮助下，我成功了。请祝你愉快day@SaschaRissling你也是！贾里德·史密斯：你认为有可能再看看我关于这个问题的另一个问题吗？我解决不了。提前谢谢。没有很多人关注wavesurfer的问题