在 React JS 中创建链接的二维码

  • Z时代
  • 2024-01-10
  • 分类：综合

在本文中，我们将了解如何在 React JS 中创建链接的二维码。二维码是可在智能手机上读取的二维条码。您必须在可以扫描的网站上看到 QR 码，从而将您重定向到一个页面。例如，要从笔记本电脑访问 WhatsApp，您可以访问“web.whatsapp.com”，然后在手机上打开 WhatsApp 并扫描给定的二维码。

示例

首先创建一个 React 项目 -

npx create-react-app tutorialpurpose

转到项目目录 -

cd tutorialpurpose

安装qrcode.react包 -

npm i --save qrcode.react

这个库将帮助我们生成二维码并添加依赖项。

现在在App.js中插入以下代码行-

import QRCode from "qrcode.react";
export default function App() {
   return (
      <div style={{ marginTop: 200, display: "flex",flexDirection: "row" }}>
         <div>
            <QRCode
               value="https://www.nhooo.com/"style={{ marginRight: 50 }}/>
            <p>Nhooo </p>
         </div>
      <div>
          <QRCode value="https://www.google.com/" style={{marginRight: 50 }} />
          <p>google</p>
      </div>
      <div>
          <QRCode value="https://github.com/" style={{marginRight: 50 }} />
          <p>github</p>
      </div>
      <div>
          <QRCode value="https://www.instagram.com/" style={{ marginRight: 50 }}/>
          <p>instagram</p>
      </div>
      <div>
          <QRCode value="https://discord.com/" style={{marginRight: 50 }} />
          <p>discord</p>
         </div>
      </div>
   );
}

解释

该代码获取一个链接，对其进行处理，然后为该链接呈现一个二维码。

在这里，我们首先导入了我们的QRCode对象，该对象接受一个名为“value”的参数，该参数接受您要制作二维码的链接。

您也可以仅在其上应用样式以用于定位和大小。

我们获取了以下 5 个网站的链接并生成了它们的二维码 -

  • https://www.nhooo.com/

  • https://www.google.com/

  • https://github.com/

  • https://www.instagram.com/

  • https://discord.com/

输出结果

在执行时，它将产生以下输出 -

用您的手机扫描任何代码，它会提示您在浏览器中打开该页面的链接

以上是 在 React JS 中创建链接的二维码 的全部内容， 来源链接： utcz.com/z/363171.html

回到顶部