在我的反应项目中，我正在集成后端服务器API以使Web应用程序正常工作 .

在处理API时，我遇到了一个API，它返回了包含JSP表达式语法的HTML页面 .

我的工作是将响应转换为React Component，以便将其集成到Web应用程序中 .

检查我从API获得的以下给出的响应 .

<html>
    <head>
        <title>Food Payment Check-Out</title>
    </head>
    <body>
        <center>
            <h1>Please do not refresh this page...</h1>
        </center>
        <form method="post" action="https://pguat.paytm.com/oltp-web/processTransaction" name="paymentForm">
            <input type="hidden" name='<%= REQUEST_TYPE %>' value='<%= DEFAULT %>'>
            <input type="hidden" name='<%= MID %>' value='<%= ToboxV6s4007205996403 %>'>
            <input type="hidden" name='<%= ORDER_ID %>' value='<%= 5b399a05cbe05c66cesd4c8f9f %>'>
            <input type="hidden" name='<%= CUST_ID %>' value='<%= 5b2e2e412fas2e43f3887a4fc %>'>
            <input type="hidden" name='<%= TXN_AMOUNT %>' value='<%= 225 %>'>
            <input type="hidden" name='<%= CHANNEL_ID %>' value='<%= WEB %>'>
            <input type="hidden" name='<%= INDUSTRY_TYPE_ID %>' value='<%= Retail %>'>
            <input type="hidden" name='<%= WEBSITE %>' value='<%= WEB_STAGING %>'>
            <input type="hidden" name='<%= CALLBACK_URL %>' value='<%= https://sandboxapi.abcd.com/api/food/paytmpayment/process %>'>
            <input type="hidden" name='<%= MOBILE_NO %>' value='<%= 90284546604 %>'>
            <input type="hidden" name='<%= EMAIL %>' value='<%=  %>'>
            <input type="hidden" name='<%= CHECKSUMHASH %>' value='<%= AZ5PIVwjxk6aDwKC3XOsGDqt6C1f3/5qszPnR++PLNIWy5mk76PRzzkhVwhGxO4WrztRsNaaL2nX4UKaghrmF3Kj55U6/h7QY&#x3D; %>'>
            <script type="text/javascript">
            document.paymentForm.submit();
        </script>
        </form>
    </body>
</html>

我希望将其转换为反应组件，如下所示 .

import React from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';

import {toggleLoader} from './../../actions/loaderActions';

import loader from './../../images/web-images/loading.gif';

class RedirectPG extends React.Component {
    inputFields = [];
    componentWillMount() {
        const {pgdata} = this.props;
        !pgdata.redirectUrl ? this.props.history.push('/user-details') : '';
    }

    componentDidMount() {
        const {pgdata,paytminfo} = this.props;
        this.props.toggleLoader(false);

        for(var key in paytminfo) {
            this.inputFields.push(<input type='hidden' name={key} value={paytminfo[key]} />);
        }

        setTimeout(() => {
            pgdata.pg === 'paytm' ? document.payment.submit() : '';
            pgdata.pg === 'sodexo' ? window.location.assign(pgdata.redirectUrl) : '';
        }, 1200);
    }

    render() {
        const {pgdata} = this.props;
        return (
            <div style={{textAlign:'center'}}>
                <img src={loader} width="120px"/>
                <h4>Please wait while we are redirecting you to the payment page...</h4>
                <form method="post" action={pgdata.redirectUrl} name="payment">
                    <input type="hidden" name="REQUEST_TYPE" value="DEFAULT" />
                    <input type="hidden" name="MID" value="ToboxV6400720sdf5996403" />
                    <input type="hidden" name="ORDER_ID" value="5b3995a1cbe05sdfc66ce4c8f99" />
                    <input type="hidden" name="CUST_ID" value="5b2e2e412fa2sdfe43f3887a4fc" />
                    <input type="hidden" name="TXN_AMOUNT" value="225" />
                    <input type="hidden" name="CHANNEL_ID" value="WEB" />
                    <input type="hidden" name="INDUSTRY_TYPE_ID" value="Retail" />
                    <input type="hidden" name="WEBSITE" value="WEB_STAGING" />
                    <input type="hidden" name="CALLBACK_URL" value="https://sandboxapi.food.com/api/food/paytmpayment/process" />
                    <input type="hidden" name="MOBILE_NO" value="9028034343604" />
                    <input type="hidden" name="EMAIL" value="" />
                    <input type="hidden" name="CHECKSUMHASH" value="qzCnQqmeZkC0YyChVfKTfOOwbcltBFN4j6ySpMnF2lcBQNBdF7J7/EczZoIibDqC2Y5z0jORQLpoSyIkSbzeK8/vKsdfXC3H8PWO883NMaIVM8&#x3D;" />
                </form>
            </div>
        );
    }
}

export default withRouter(connect(state => state.paymentpage,{toggleLoader})(RedirectPG));

上面的react组件准备就绪，但我希望 <form></form> 中的元素应该根据API的响应进行填充 .

我没有得到一个线索来开始这个 . 感谢帮助 .

javascript reactjs