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>

错误讯息：

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

我不知道是什么问题，似乎没关系，但我无法运行它。谢谢你的帮助。

Answer 1

主要是关闭<hr>标签。更好的做法是自动关闭<input>标签，如<input type="text" />。作为奖励，我将<label>标记分隔到每个输入字段，只要您点击字段标签，它就会聚焦右侧输入字段。

在继续之前，我建议您阅读这两个jsx指南：introduction，advanced。

修改后的代码：

<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 />，因为他们也没有内容。

未终止的JSX内容 - 反应

2 个答案: