VLibras 无法渲染，因为库内的属性未定义

Question

我正在使用 React 和 Next.js 构建一个 Web 应用程序，并尝试将 VLibra 添加到我的网站。问题是，我总是想加载 VLibras，它总是显示：读取未定义的属性（读取“发出”）。它指的是VLibras插件中的以下方法：

i.onPlayingStateChange

，

i.GetAvatar

和

i.onLoadPlayer

。所有这些函数都有一个从 VLibras 库内的 s.instance 读取的“emit”属性：

    i.GetAvatar = function(t) {
        s.instance.emit("GetAvatar", t)
    }
    [...]
    i.onLoadPlayer = function() {
        s.instance.emit("load")
    }
    [...]
    i.onPlayingStateChange = function(t, e, n, i, o) {
        s.instance.emit("stateChange", a(t), a(e), a(i))
    }

在库内部进行调查时，s.instance 在此函数中定义：

    [...]
    function s() {
        if (s.instance)
            return s.instance;
        this.subtitle = !0,
        this.currentBaseUrl = "",
        this.on("load", function() {
            this._send("initRandomAnimationsProcess")
        }
        .bind(this)),
        s.instance = this
    }
    [...]

这里被称为：

[...]
function t() {
    s() && (document.addEventListener("mouseover", g),
    document.addEventListener("mouseout", w),
    document.addEventListener("scroll", m),
    document.addEventListener("click", f, !0),
    window.addEventListener("vp-widget-close", x),
    window.addEventListener("vp-disable-text-capture", x),
    window.addEventListener("vp-enable-text-capture", t))
}()
[...]

我不知道为什么 s.instance 在

i.onPlayingStateChange

、

i.GetAvatar

和

i.onLoadPlayer

中未定义，因为实例是由

s()

创建并在

t()

中调用的。由于这些问题，VLibras 无法正确渲染。它只是呈现一个静态播放器，没有任何功能。我需要库正确创建实例以获得 VLibras 的正确渲染。

我将在这里保留 VLibras 组件实现以进行澄清。这是从 this repo 获得的。

VLibras.tsx

'use client';

import React, { EffectCallback, useEffect } from "react";

type ExpectedReadyState =
  | ReadonlyArray<DocumentReadyState>
  | DocumentReadyState
  | undefined;

const isReadyStateMatch = (expected?: ExpectedReadyState): boolean => {
  if (!expected) {
    return true;
  }
  if (typeof expected === "string" && document.readyState === expected) {
    return true;
  }
  return expected.indexOf(document.readyState) !== -1;
};

type useReadyStateEffect = (
  effect: EffectCallback,
  deps?: any[],
  onState?: ExpectedReadyState
) => void;

const useReadyStateEffect: useReadyStateEffect = (
  effect,
  deps = [],
  onState = "complete"
): void => {
  useEffect(() => {
    const destructors: Array<() => void> = [
      () => document.removeEventListener("readystatechange", listener),
    ];

    const listener = () => {
      if (!isReadyStateMatch(onState)) {
        return;
      }
      const destructor = effect();
      if (destructor) {
        destructors.push(destructor);
      }
    };

    listener();
    document.addEventListener("readystatechange", listener);

    return () => destructors.forEach((d) => d());
  }, deps);
};

type Props = {
  forceOnload?: boolean;
};

function VLibras({ forceOnload }: Props): JSX.Element {
  useReadyStateEffect(
    () => {
      const script = document.createElement("script");
      script.src = "https://vlibras.gov.br/app/vlibras-plugin.js";
      script.async = true;
      script.onload = () => {
        // @ts-ignore
        new window.VLibras.Widget(`https://vlibras.gov.br/app`);
        if (forceOnload) {
          // @ts-ignore
          window.onload();
        }
      };
      document.head.appendChild(script);
    },
    [forceOnload],
    "complete"
  );

  return (
    // @ts-ignore
    <div vw="true" className="enabled">
      <div vw-access-button="true" className="active" />
      <div vw-plugin-wrapper="true">
        <div className="vw-plugin-top-wrapper" />
      </div>
    </div>
  );
}

export default VLibras;

Answer 1

您修复了这个错误吗？我也有同样的问题。