PayPal 捐赠按钮导致错误“未终止的 JSX 内容”答案

【问题标题】：PayPal Donate button causes error "Unterminated JSX contents"PayPal 捐赠按钮导致错误“未终止的 JSX 内容”
【发布时间】：2018-08-24 15:21:20
【问题描述】：

我正在尝试将 PayPal 的“捐赠”按钮添加到使用 Meteor 构建的 React 应用程序中。

我已将 PayPal 网站生成的代码粘贴到我的“includes”目录中的 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 按钮需要具有未终止的元素？我用谷歌搜索过，但没有找到任何东西。

【问题讨论】：

标签： reactjs paypal

【解决方案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。

【讨论】：

正如我在帖子中所说，我确实做到了，而且它似乎有效。我的问题是像这样更改生成的代码是否有任何“问题”？
没有陷阱，因为这是 JSX 而不是实际的 HTML，然后将被转译成 JS，将正确的 HTML 元素呈现给 DOM。

【解决方案2】：

您需要终止您的<input> 标签。以<input type="hidden" name="cmd" value="_s-xclick" /> 为例。

您还需要为您的<img> 标签做同样的事情

【讨论】：