reactjs - 如何在 React 中使用 wavesurfer.js？

Question

我正在尝试在我的反应应用程序中使用 wavesurfer.js 渲染音频文件。我是个菜鸟，我想知道为什么我总是收到“找不到容器元素”消息。

简而言之，这是我需要知道的。

先感谢您！

import React from "react";
import WaveSurfer from "wavesurfer.js";

export default function Chat(){

  const wavesurfer = WaveSurfer.create({
    container: "#waveform",
  });
  
  render(
    <>
      <div id="waveform">
      </div>
    </>
  )
 }

Answer 1

您当前正在渲染函数中调用它，这意味着每次组件刷新时都会执行它。相反，您可以将其添加到useEffect挂钩中，以便仅调用一次波形函数并且您要绑定它的元素存在。

此外，您可以使用 aref代替 ID，这是 React 用来引用 DOM 元素的。

import React, { useRef, useEffect } from "react";
import WaveSurfer from "wavesurfer.js";

export default function Chat(){
  const waveformRef = useRef();

  useEffect(() => {
    if(waveformRef.current) {
      const wavesurfer = WaveSurfer.create({
        container: waveformRef.current,
      });
    }
  }, []);
  
  return(
    <>
      <div ref={waveformRef}>
      </div>
    </>
  )
 }

使用效果 参考