未终止的 JSX 内容答案

【问题标题】：Unterminated JSX contents未终止的 JSX 内容
【发布时间】：2016-06-26 12:44:59
【问题描述】：

在一个流星应用程序中，我正在尝试使用 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)

可能是什么原因？

【问题讨论】：

标签： meteor reactjs react-jsx

【解决方案1】：

你需要关闭br元素，在反应中总是使用selft关闭标签，也不要使用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>
        );
    }
}

【讨论】：

【解决方案2】：

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 标签

【讨论】：