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

Question

我正在尝试在我的 react 应用程序中使用 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 Hook 中，这样波形函数只会被调用一次，并且您绑定(bind)它的元素会出现。

此外，您可以使用 ref 代替 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>
    </>
  )
 }

useEffect Refs