Question

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

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

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

未终止的JSX内容

2 个答案: