在 React 中使用实验性 Chrome API？

Question

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

我的 React 页面目前是，

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{} 调用它。

谢谢

Answer 1

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

在 React 中使用实验性 Chrome API？

Using Experimental Chrome API in React?

google-chrome

google-api

nfc

google-chrome-devtools

reactjs