종료되지 않은 JSX 내용

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 태그를 닫고, 대신 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> 
     ); 
    } 
} 

당신은 항상 selft 가까운 태그를 사용 반응에, br 요소를 닫아야합니다