node.js ES6如何将值传递给html元素

问题描述

我想用es6创建qrcode,我想将函数builder.DataSource = '.' 的返回值传递给generateQR()元素,但是出现404错误,该如何解决呢? 这是我的代码

<img>

解决方法

generateQR是异步的。它返回一个承诺。您应该使用state并在QR准备就绪后重新渲染组件:

创建一个单独的组件以生成QR码。

// components/QRCode.js
import React,{ useEffect,useState } from "react";
import { toDataURL } from "qrcode";

function QRCode({ text }) {
  const [src,setSrc] = useState("data:image/gif");

  useEffect(() => {
    toDataURL(text).then((qr) => setSrc(qr));
  },[text]);

  return <img src={src} alt="qr" />;
}

export default QRCode

然后像这样导入和使用

<QRCode text="hello world"/>