用ReactJ记录xapi事件？

Question

我正在用reactjs实现h5p，我可以播放h5p播放器，但是我无法用externalDispatcher.on来查看事件(“xAPI”，(事件).命令。

如何在reactjs中记录h5p事件

错误消息:无法读取未定义的属性(读取“on”)

import { H5P } from "h5p-standalone";
import { useEffect } from "react";

export default function App() {
  useEffect(() => {
    const el = document.getElementById("h5p-container");
    const options = {
      h5pJsonPath: "/h5p/pygame",
      frameJs: "/assets/frame.bundle.js",
      frameCss: "/assets/styles/h5p.css"
    };
    const needAsync = async () => {
      await new H5P(el, options).then((res) => {
        H5P.externalDispatcher.on("xAPI", (event) => {
          console.log(event);
        });
      });
    };
    needAsync();
  }, []);
  return <></>;
}

错误消息

Answer 1

您将H5PStandalone导入为H5P，当您想要侦听H5P发送的事件时，这不是要查找的H5P对象。

您需要使用

import { H5P as H5PStandalone } from 'h5p-standalone';

然后用new H5PStandalone(el, options)实例化。这将允许您在实例化H5P对象之后访问真正的H5PStandalone对象。

还有一点提示:您将承诺和异步调用混合在一起。你要么使用前者，比如

const needAsync = () => {
  new H5PStandalone(el, options).then(() => {
    H5P.externalDispatcher.on('xAPI', (event) => {
      console.log(event);
    });
  });
};

或者后者喜欢

const needAsync = async () => {
  await new H5PStandalone(el, options);
 
  H5P.externalDispatcher.on('xAPI', (event) => {
    console.log(event);
  });
};

他们俩都做同样的事。从技术上讲，您也不需要将它们封装在函数中，而是可以直接运行代码(如果使用App语法，则需要声明为异步)。