React - 解析错误：<input> 的预期对应 JSX 结束标记答案

【问题标题】：React - Parsing error: Expected corresponding JSX closing tag for <input>React - 解析错误：<input> 的预期对应 JSX 结束标记
【发布时间】：2020-03-19 12:23:58
【问题描述】：

我是 React 新手，我正在开发一个组件。我有以下代码：

order-item.component.jsx：

import React, { Component } from 'react';
import { connect } from 'react-redux';

import './order-item.scss';


class OrderItem extends Component {
    render() {
        return (
            <div class="wrapper">
                <div class="order-box">
                    <div class="order-header">
                        <h2>ORDER #1</h2>
                    </div>
                    <div class="order-list">
                        <ul>
                            <li>
                                <label class="container">Item #1 (2x)
                                    <input type="checkbox" checked="checked">
                                    <span class="checkmark"></span>
                                </label>
                            </li>

                            <li>
                                <label class="container">Item #3 (2x)
                                    <input type="checkbox">
                                    <span class="checkmark"></span>
                                </label>
                            </li>

                            <li>
                                <label class="container">Item #6 (1x)
                                    <input type="checkbox">
                                    <span class="checkmark"></span>
                                </label>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        );
    }
}

export default OrderItem;

但是，我收到以下错误：

我在 HTML 中读过，<input> 标签没有结束标签。我不确定如何解决此错误。任何见解都值得赞赏。

【问题讨论】：

<input> 必须是 <input/>。
I have read that in HTML, the <input> tag has no end tag 不是 html，而是 JSX
与问题无关，但作为补充 - 在您的代码中将 class 更改为 className 是值得的，因为这会导致进一步的警告。

标签： javascript reactjs jsx

【解决方案1】：

您需要关闭输入标签：

<input ...props />

由于您在 react 组件中编写 JSX 而不是实际的 HTML，因此这是您必须处理的异常情况之一：/

【讨论】：

【解决方案2】：

把/放在最后

<input type="checkbox" /> or <input type="checkbox"></input>

【讨论】：

【解决方案3】：

好像忘记关闭输入标签了

<input type="checkbox" />

【讨论】：