react怎麼實現跳轉支付

react實作跳轉支付的方法：1、執行「const div = document.createElement('div')div.innerHTML = res document.body.appendChild(div);document.forms[0]. submit();」語句實現跳轉；2、使用「qrcode.react」產生二維碼，再跳轉頁面。

本教學操作環境：Windows10系統、react18.0.0版、Dell G3電腦。

react怎麼實現跳轉支付？

react 後台返回html 銀聯支付前端頁面跳轉以及返回鏈接

這幾天做銀聯的時候遇到了這樣一個問題後端返回了一個完整的html,需要在前端跳到銀聯支付的頁面

跳轉頁面的程式碼執行⬇️

              const div = document.createElement('div')
              div.innerHTML = res //后台返回接收到的html数据
              document.body.appendChild(div);
              document.forms[0].submit();

執行以上四步驟就可以實現

如果返回的是連結就可以直接執行⬇️

window.location.href = res//链接地址

如果返回的是二維碼的形式可以跳到頁面

history.push({pathname: "/Movie/Pay"})

react使用qrcode.react產生二維碼

#########################安裝###

npm install qrcode.react --save
import QRCode from 'qrcode.react'
//code_url这个是后端返回的链接
//返回格式 code_url:"weixin://wxpay/bizpayurl?pr=5dDc2T1zz"
<div style={{marginTop: 10}}>
    <QRCode 
value={code_url}
size={180}
fgColor="#000000"/>
</div>

###react頁面跳轉兩種方式######1.params形式，路由跳轉後，參數會顯示在網址列######跳轉的方法是使用： ###history.push({pathname: '/personal', search: 'test=22222'})#########2.使用state的形式，頁面刷新不會丟失數據，並且地址欄也看不到資料######跳轉的方法是使用###history.push({pathname: '/personal', state: {test: 'dashboard'}})######## ##推薦學習：《###react影片教學###》###

以上是react怎麼實現跳轉支付的詳細內容。更多資訊請關注PHP中文網其他相關文章！