SyntaxError：<input> 应有相应的 JSX 结束标记 [重复]答案

【问题标题】：SyntaxError: Expected corresponding JSX closing tag for <input> [duplicate]SyntaxError：<input> 应有相应的 JSX 结束标记 [重复]
【发布时间】：2019-01-24 09:03:30
【问题描述】：

我真的很抱歉，对于你们大多数人来说，这就像一个愚蠢的问题......但我的大脑现在无法工作。所以这是我的 index.js

import React from 'react';
import './style.scss';

const MyComponent = () => (
    <div style="margin:auto;">

        <table cellSpacing="0" cellPadding="0" style="margin:0 auto;margin-bottom:2rem;">
            <tr>
                <td><span
                    style="  height: 100px;width: 100px;background-color: darkgrey;border-radius: 50%;display: inline-block;"></span>
                </td>
                <td style="color:#2c4e88;">
                    <h1><p>swedavia</p></h1>
                    <h2><p>swedish airports</p></h2>
                </td>
            </tr>
        </table>


        <form>
            <div style="color:darkgrey;padding: 16px;">
                <label htmlFor="uname">Username</label>
                <input type="text" name="uname" required>
                    <label htmlFor="psw">Password</label>
                    <input type="password" name="psw" required>
                        <div style="margin-top:2rem;">
                            <button type="submit">?????????</button>
                            <span style="float: right;padding-top: 16px;"><a href="#">Forgot password?</a></span>
                        </div>
            </div>
        </form>

    </div>
);
export default MyComponent;

这是 index.html

<html> 
  <head>
    <title>My Component Demo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
  </head> 
  <body> 
    <noscript>
      You need to enable JavaScript to run this app. 
    </noscript> 
    <div id="root"></div> 
  </body> 
</html>

这是examples/src/index.js

import React from 'react';
import { render} from 'react-dom';
import MyComponent from '../../src';
const App = () => (
    <MyComponent />
);
render(<App />, document.getElementById("root"));

我不明白如何渲染它当我想呈现完整形式时它不起作用...... 但是当它是例如

<h1>Hello</h1>

然后就可以了……

【问题讨论】：

import MyComponent from '../../src'; 这是您正在渲染组件的索引文件的路径。
@BhojendraNepal SyntaxError: 需要对应的 JSX 结束标记
@BhojendraNepal 你是对的，我盲目地认为有{，但我看到它是(，对不起
@AdrianoRepetti 它总是会发生，因为它是 JSX。我之前也遇到过很多次语法。

标签： javascript html reactjs react-native webpack

【解决方案1】：

输入元素有错误：

<input type="password" name="psw" required>

像这样替换所有输入元素：

<input type="password" name="psw" required />
// ---------- self closing tag ------------^

在普通的 html 中，您可以在没有自结束标记的情况下对输入元素进行编码，因为浏览器会在渲染时处理它们。但是 JSX 不理解没有结束标记的元素。

也要小心其他replaced elements。无论何时，你需要使用它们，你都需要有结束标签。

【讨论】：