未终止的JSX内容-反应

Question

    <div>
      <button style={{width: "100%"}} className="pt-button pt-intent-primary" onClick="{() => { this.authWithFacebook() }}">Log In with Facebook</button>
      <hr style={{marginTop: "10px", marginBottom: "10px"}}>
      <form onSubmit={(event) => { this.authWithEmailPassword(event) }} ref={(form) => { this.loginForm = form }}>
        <div style={{marginBottom: "10px"}} className="pt-callout pt-icon-info-sign">
          <h5>Note</h5>
          If you dont have an account already, this will create you one!
        </div>
        <label className="pt-label">
          Email
          <input style={{width: "100%"}} className="pt-input" name="email" type="email" ref={(input) => {this.emailInput = input}} placeholder="Email"></input>
          Password
          <input style={{width: "100%"}} className="pt-input" name="password" type="password" ref={(input) => {this.passwordInput = input}} placeholder="Password"></input>
        </label>
         <input style={{width: "100%"}} type="submit" className="pt-button pt-intent-primary" value="Log In"></input>
        </form>
    </div>

Error message:

Syntax error: D:/xxxx/xxxx/xxxx/webWorker/webworker/src/components/Login.js: Unterminated JSX contents (39:14)

I do not know what is the problem, it seems to be OK but I cant run it. Thank you for helping.

Answer 1

It is mainly about closing the <hr> tag. Better would be also to self-close the <input> tags like so <input type="text" /> . As a bonus I separated the <label> tag to each of the input fields, that way whenever you click on the field label it is focusing the right input field.

Before moving on I would recommend to read those two jsx guides: introduction , advanced .

Your code after modifications:

<div>
  <button style={{width: "100%"}} className="pt-button pt-intent-primary" onClick="{() => { this.authWithFacebook() }}">Log In with Facebook</button>
  <hr style={{marginTop: "10px", marginBottom: "10px"}} />
  <form onSubmit={(event) => { this.authWithEmailPassword(event) }} ref={(form) => { this.loginForm = form }}>
    <div style={{marginBottom: "10px"}} className="pt-callout pt-icon-info-sign">
      <h5>Note</h5>
      If you dont have an account already, this will create you one!
    </div>
    <label className="pt-label">
      Email
      <input style={{width: "100%"}} className="pt-input" name="email" type="email" ref={(input) => {this.emailInput = input}} placeholder="Email"/>
      </label>
    <label className="pt-label">
      Password
      <input style={{width: "100%"}} className="pt-input" name="password" type="password" ref={(input) => {this.passwordInput = input}} placeholder="Password"/>
    </label>
     <input style={{width: "100%"}} type="submit" className="pt-button pt-intent-primary" value="Log In"/>
    </form>
</div>

Answer 2

尝试关闭<hr />标签，您也可以关闭输入标签<input /> ，因为它们也没有内容。