Question

我正在尝试在我的react应用程序中使用waveurfer.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

您当前正在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,
      });
    }
  }, []);

  render(
    <>
      <div ref={waveformRef}>
      </div>
    </>
  )
 }

useEffect Refs

如何在React中使用Wavesurfer.js？

1 个答案: