reactjs - Paypal 捐赠按钮导致错误 "Unterminated JSX contents"

Question

我正在尝试向使用 Meteor 构建的 React 应用添加一个 PayPal“捐赠”按钮。

我已将 PayPal 网站生成的代码粘贴到“包含”目录中的文件 DonateButton.jsx 中:

import React from 'react';

function DonateButton() {
    return (
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="encrypted" value="-----BEGIN REDACTED-----END PKCS7-----
">
<input type="image" src="https://www.paypalobjects.com/en_US/GB/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>
    );
}

export default DonateButton;

当项目尝试编译时，我看到了这个错误:

Unterminated JSX contents

我注意到 PayPal 代码中的 img 和 input 元素未终止:<img (stuff) >

如果我向每个元素添加一个向前的笔划以像这样关闭它 <img (stuff) />错误消失了，按钮可以像任何其他 React 组件一样添加到页面:

import DonateButton from '../../components/DonateButton/DonateButton.jsx';

const Home = ({ history }) => (
    <div className="Home">
        <DonateButton />
    </div>
);

一切看起来都很好，点击按钮会将我带到 PayPal 捐赠表格。

我的问题是，有人知道这是否可行，或者是否有某种原因导致 PayPal 按钮需要具有未终止的元素？我用谷歌搜索但没有找到任何东西。

Answer 1

所有输入字段都需要是自闭合标签。 <input />和 img 标签 <img />

像这样:

<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="encrypted" value="-----BEGIN REDACTED-----END PKCS7----- " />
<input type="image" src="https://www.paypalobjects.com/en_US/GB/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online!" />
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1" />

没有陷阱，因为这是 JSX 而不是实际的 HTML，然后将被转换成 JS，从而将正确的 HTML 元素呈现给 DOM。