未终止的 JSX 内容

Question

在 meteor 应用程序中，我正在尝试使用 React 呈现登录表单。

import React from 'react';

export default class Login extends React.Component {
    render() {
        return (
        <div class="login-card">
            <h1>Log-in</h1><br>
            <form>
                <input type="text" name="user" placeholder="Username" />
                <input type="password" name="pass" placeholder="Password" />
                <input type="submit" name="login" class="login login-submit" value="login" />
            </form>

            <a class="login-help" href="#">Register</a>
        </div>
        );
    }
}

但是 metor 无法编译上面的 jsx 文件并说.

While processing files with ecmascript (for target web.browser):
   client/loginForm.jsx:15:8: Unterminated JSX contents (15:8)

可能是什么原因？

Answer 1

import React from 'react';

export default class Login extends React.Component {
    render() {
        return (
        <div class="login-card">
            <h1>Log-in</h1><br></br>
            <form>
                <input type="text" name="user" placeholder="Username" />
                <input type="password" name="pass" placeholder="Password" />
                <input type="submit" name="login" class="login login-submit" value="login" />
            </form>

            <a class="login-help" href="#">Register</a>
        </div>
        );
    }
}

关闭br标签

Answer 2

您需要关闭 br 元素，在 React 中始终使用自关闭标签，并且也不要使用 class 使用 className 代替

import React from 'react';

export default class Login extends React.Component {
    render() {
        return (
        <div className="login-card">
            <h1>Log-in</h1><br/> // Close br
            <form>
                <input type="text" name="user" placeholder="Username" />
                <input type="password" name="pass" placeholder="Password" />
                <input type="submit" name="login" className="login login-submit" value="login" />
            </form>

            <a className="login-help" href="#">Register</a>
        </div>
        );
    }
}

未终止的 JSX 内容

Unterminated JSX contents

meteor

reactjs

react-jsx