react如何實現跳轉支付

今天小編給大家分享一下react如何實現跳轉支付的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

react實現跳轉支付的方法：1、執行“const div = document.createElement('div')div.innerHTML = res document.body.appendChild(div);document.forms[0].submit();”語句實現跳轉；2、使用“qrcode.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如何實現跳轉支付”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。