如何在React中使用wavesurfer.js？

Question

我正在尝试在我的react应用程序中使用wavesurfer.js呈现音频文件。我是一个新手，我想知道为什么我总是收到"Container element not found“消息。

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

提前THank你！

​

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

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

此外，您可以使用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