在 React 中使用实验性 Chrome API？

问题描述

我正在尝试在 react 中使用 Chrome nfc api（WEB NFC），因此当您在启用了 nfc 的移动设备上打开 react 页面并按下按钮时，它会检查是否有 nfc 扫描。

我正在通读文档和执行此操作的示例代码，

scanButton.addEventListener("click",async () => {
  log("User clicked scan button");

  try {
    const ndef = new NDEFReader();
    await ndef.scan();
    log("> Scan started");

    ndef.addEventListener("readingerror",() => {
      log("Argh! Cannot read data from the NFC tag. Try another one?");
    });

    ndef.addEventListener("reading",({ message,serialNumber }) => {
      log(`> Serial Number: ${serialNumber}`);
      log(`> Records: (${message.records.length})`);
    });
  } catch (error) {
    log("Argh! " + error);
  }
});

我的反应页面目前是，

import { Button } from "@material-ui/core";
import React from "react";

const nfcpage = () => {

  return (
    <>
      <Button
        id = "scanButton"
      >
          Press to test NFC
      </Button>
    </>
  );
};

export default nfcpage;

我希望在按下按钮时运行 scanButton 代码。换句话说，将 scanButton 变成一个可以通过 onClick{} 被我的按钮调用的函数。

谢谢

解决方法

我能够通过从示例代码创建一个异步函数并将其传递给按钮组件中的 onClick 来解决此问题