Question

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

然后它起作用了...

Answer 1

输入元素有误：

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

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

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

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

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

SyntaxError：预期<input />对应的JSX结束标记

1 个答案: