iframe呈现错误，将PayPal集成到React.js中

如何解决iframe呈现错误，将PayPal集成到React.js中

我有一个使用create-react-app创建的应用程序，我需要将PayPal作为一种付款方式。

我创建了组件 PayPalBtn ，如下所示：

struct path_sep_comp
{
    // also note the removed default constructor,we don't need that
    
    // we can make this constexpr in C++17
    constexpr bool operator () (tchar ch) const
    {
#if defined (_WIN32)
        return ch == LOG4CPLUS_TEXT ('\\') || ch == LOG4CPLUS_TEXT ('/');
#else
        return ch == LOG4CPLUS_TEXT ('/');
#endif
    }
};

从另一个文件（Pay.js）中，我调用该组件：

import React from 'react'

export default function PayPalBtn() {
    
    const [paid,setPaid] = React.useState(false);
    const [error,setError] = React.useState(null);

    const paypalRef = React.useRef();

    React.useEffect(() => {
        window.paypal.Buttons({
            createOrder: (data,actions) => {
                return actions.order.create({
                    intent: "CAPTURE",purchase_units: [{
                        description: "Description",amount: {
                            currency_code: "USD",value: 500.0,},],});
            },onApprove: async (data,actions) => {
            const order = await actions.order.capture();
            setPaid(true);
            console.log(order);
            },onError: (err) => {
            //   setError(err),console.error(err);
            },}).render(paypalRef.current);
    },[]);

    // If the payment has been made
    if (paid) {
        console.log("SUCCESS");
    }
    // If any error occurs
    if (error) {
        console.log("ERROR");
    }

    
    return (
        <div>

        </div>
    )
}

我以前包括过

import PayPalBtn from './PayPalBtn';

class Buy extends Component {
    render() {
        return (
            // Other code..
            <PayPalBtn />
            // ...
        )
    }
}

将我的沙箱客户端 ID作为CLIENT放在公用文件夹的index.html文件的标题内

我包含以下npm模块：

<script src="https://www.paypal.com/sdk/js?client-id=CLIENT"></script>

在localhost中测试站点，浏览器给我这个错误：

"dependencies": {
    "@testing-library/jest-dom": "^4.2.4","@testing-library/react": "^9.3.2","@testing-library/user-event": "^7.1.2","crypto-js": "^4.0.0","firebase": "^7.19.0","paypal-rest-sdk": "^1.8.1","react": "^16.13.1","react-dom": "^16.13.1","react-router": "^5.2.0","react-router-dom": "^5.2.0","react-scripts": "3.4.3"
 }

其次：

unhandled_error {err: "Error: Expected element to be passed to render ifr…://localhost:3000/static/js/1.chunk.js:149958:31)",timestamp: "1598351976152",referer: "localhost:3000",uid: "fdd8bf1947_mta6mjc6ndk",env: "sandbox"}env: "sandbox"err: "Error: Expected element to be passed to render iframe

结果，浏览器没有显示该按钮。

有人可以告诉我我错了什么以及解决该问题必须做什么吗？

解决方法

render的{​​{1}}方法需要一个DOM元素。您创建了引用，但未指向任何元素。像这样修改PayPal.buttons：

PayPalBtn.js