英文:
Export function/method from react use effect / hook
问题
我在我的项目中有一个wavesurfer实例。这会动态显示各种音频文件。
我要在一个页面上呈现它，我想要播放和暂停按钮来触发wavesurfer。
我不太明白如何传递这些函数？
它们在代码中有标记。
提前感谢！
英文:
I have this instance of wavesurfer ni one of my projects.
This displays various audio files dynamically.
I'm rendering this on a page where i want play and pause buttons to trigger wave surfer.
I don't quite understand how i can pass these functions?
THey are marked in the code.
THanks in advance!
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} />
</>
);
}
答案1
得分: 1
以下是翻译好的部分：
你需要使用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}>播放</Button>
<Button onClick={pause}>暂停</Button>
</>
);
}
如果你想在其他地方渲染这些按钮，你需要从父函数中传递一个setter，并将绑定的方法传递回去。
英文:
You'll want to store the reference to the instance with useState, and attach the relevant bound methods to buttons:
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>
</>
);
}
If you want to render the buttons somewhere else, you'll need to pass in a setter from a parent function and pass the bound methods back up.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论