Nicht abgeschlossene JSX-Inhalte

Question

In einer Meteor-App versuche ich ein Login-Formular mit React zu rendern.

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> 
     ); 
    } 
} 

Aber Metor ist nicht in der Lage, die obige jsx-Datei zu kompilieren und sagt.

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

Was kann der Grund sein?

Answer 1

Sie müssen br Element schließen, in immer Selft schließen Tags verwenden, reagieren, und nicht auch class Gebrauch verwenden className statt

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> 
     ); 
    } 
} 

Schließen Sie die br-Tag