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

react jsjavascript libraryfront end technology更新于 2025/11/19 16:12:17

在本文中，我们将了解如何在 React JS 中创建链接的二维码。二维码是一种可在智能手机上读取的二维码。您一定在网站上见过二维码，扫描二维码后会跳转到相应的页面。例如，要从笔记本电脑访问 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.tutorialspoint.com/"style={{ marginRight: 50 }}/>
            <p>Tutorialspoint </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>
   );
}