时间戳

首页 > 解决方案 > node.js ES6如何将值传递给html元素

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

问题描述

我想用 es6 创建 qrcode，我想将函数的返回值传递generateQR()给<img>元素，但是出现 404 错误，我该如何解决，这是我的代码：

// index.js:
const QRcode = require('qrcode');
 
class index extends Component{
    generateQR = async text => {
      let qrSrc = "";
      try {
        qrSrc = await QRcode.toDataURL(text);
      } catch(err){
          console.log(err);
      }
      return qrSrc;
    }

    render(){ 
        return(
                <div>
                <img src={this.generateQR("www.hello.world")}/>
                <div/>
        )
    }
}

标签： javascriptnode.jses6-class

解决方案

generateQR是异步的。它返回一个承诺。当 QR 准备好时，您应该使用state并重新渲染组件：

创建一个单独的组件来生成 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"/>

推荐阅读