Reactでジャンプペイメントを実装する方法

ジャンプ支払いを実装するための React メソッド: 1. "const div = document.createElement('div')div.innerHTML = res document.body.appendChild(div);document.forms[0] を実行します。 ();" ステートメントを使用してジャンプを実装します。 2. "qrcode.react" を使用して QR コードを生成し、ページにジャンプします。

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

React でジャンプペイメントを実装するにはどうすればよいですか?

バックエンドが HTML を返す反応、UnionPay 支払いのフロントエンド ページにジャンプしてリンクを返す

過去数日間に UnionPay を実行しているときにこのような問題が発生しました。バックエンドは完全な HTML を返しました。フロントエンドでUnionPay支払いページにジャンプする必要があります

ジャンプページのコード実行⬇️

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

上記の4つのステップを実行することで実装できます

Ifリンクが返された場合は、直接実行できます ⬇️

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

返されたフォームが QR コードの場合は、ページにジャンプできます

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

react は qrcode.react を使用してQR コード

インストール

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>

反応ページにジャンプする 2 つの方法

1.params フォームにジャンプすると、ルートがジャンプした後、パラメータがアドレス バー

ジャンプ方法は、history.push({pathname: '/personal', search: 'test=22222'})

2 を使用します。状態フォームを使用すると、ページを更新してもデータが失われることはありません。また、アドレス バーにもデータが表示されません。

ジャンプする方法は、history.push({pathname: '/ Personal'、状態: {test: 'dashboard'}})

推奨される学習: "react ビデオ チュートリアル "

以上がReactでジャンプペイメントを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。