如何在 React 中使用 wavesurfer.js？答案

【问题标题】：How to use wavesurfer.js in React?如何在 React 中使用 wavesurfer.js？
【发布时间】：2019-12-17 17:36:12
【问题描述】：

我正在尝试在我的 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>
    </>
  )
 }

【问题讨论】：

您正在尝试将 javascript 库安装到 id 为“container”的 div 中，在您的渲染函数中，该函数在 React 生成 HTML 并使用具有该 ID 的组件更新 DOM 之前运行。将调用放入 componentdidmount 回调中

标签： reactjs wavesurfer.js

【解决方案1】：

您当前正在渲染函数中调用它，这意味着它会在每次组件刷新时执行。相反，您可以将其添加到 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

【讨论】：