javascript - SyntaxError:<input>期望对应的JSX结束标记

This question already has answers here:

Expected corresponding JSX closing tag for input Reactjs

                                    （5个答案）


                2年前关闭。



我真的很抱歉，对于你们大多数人来说，这就像一个愚蠢的问题……但是我的大脑现在无法正常工作。这就是我的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>

这是示例/ 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>

然后就可以了...

最佳答案

输入元素有误：

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

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

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

在普通的html中，您可以对输入元素进行编码而无需使用自闭标签，因为浏览器在渲染时会处理它们。但是JSX无法理解没有结束标记的元素。

还要注意其他replaced elements。每当需要使用它们时，都需要具有结束标记。

关于javascript - SyntaxError:<input>期望对应的JSX结束标记，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51893373/