資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學在React JS中建立連結的二維碼
在本文中，我們將學習如何在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://tutorialspoint.tw/"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>
);
}解釋
這段程式碼接收一個連結，對其進行處理，然後為該連結渲染一個二維碼。
這裡我們首先匯入了我們的 **QRCode** 物件，它接收一個名為 **"value"** 的引數，該引數包含要生成二維碼的連結。
您還可以僅為定位和大小應用樣式。
我們獲取了以下5個網站的連結並生成了它們的二維碼：
輸出
執行後，將產生以下輸出：
使用您的手機掃描任何程式碼，它將提示您在瀏覽器中開啟該頁面的連結
更新於：2021年9月29日
2K+ 次瀏覽
廣告