React组件开发遇<input>标签JSX解析错误，求解决方案

嘿，作为React新手碰到这个问题太正常啦！这个错误的核心原因是JSX的语法规则和HTML有一点小差异——虽然HTML里<input>是自闭合标签不需要写闭合部分，但JSX要求所有标签必须显式闭合，哪怕是单标签也得加上/>来收尾。

具体修复步骤： #

1. 修正标签的闭合方式
   把你代码里所有的<input>标签都改成自闭合形式，也就是在标签末尾添加/>。比如：

   • 原来的 <input type="checkbox" checked="checked"> 要改成 <input type="checkbox" checked="checked" />
   • 其他两个<input>标签同理，都加上/>

2. 替换class为className（额外小提示）
   另外还要注意，React的JSX里不能直接用HTML的class属性，因为class是JavaScript的关键字，必须改用className。你代码里所有的class="xxx"都要替换成className="xxx"，否则会出现警告哦。

修改后的完整代码： #

import React, { Component } from 'react';
import { connect } from 'react-redux';
import './order-item.scss';

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

export default OrderItem;

这样修改之后，那个解析错误应该就消失啦，而且也能避免class属性带来的潜在问题～

内容的提问来源于stack exchange，提问作者ceno980