相鄰的 JSX 元素必須包含在封閉標記中 (34:0)

Question

這是我一直在嘗試創建的聯系頁面。 我一直在嘗試編譯它，但是給了我一個 Adjacent JSX elements must be Wrap in an enclosure tag (34:0) 錯誤。 我也嘗試使用 <> 和 </>，但這顯示了意外的表達式錯誤。 我知道我錯過了一些標簽，但我無法弄清楚。 我是學習 React 的初學者。 請幫忙。

return (
    
      <div className="my-5">
        <h1 className="text-center"> Contact Us </h1>
      </div>
<div className= "container contact_div">
        <div className="row">
          <div className="col-md-6 col-10 mx-auto">
            <form onSubmit={formSubmit}>
              <div className="mb-3">
                <label className="form-label">Full Name</label>
                <input
                  type="text"
                  className="form-control"
                  id="exampleFormControlInput1"
                  name="fullname"
                  value={data.fullname}
                  onChange={inputEvent}
                  placeholder="name"
                />
             </div>
              <div className="mb-3">
                <label className="form-label">Phone</label>
                <input
                  type="number"
                  className="form-control"
                  id="exampleFormControlInput1"
                  name="phone"
                  value={data.phone}
                  onChange={inputEvent}
                  placeholder="mobile number"
                />
              </div>
              <div className="mb-3">
                <label className="form-label">Email address</label>
                <input
                  type="email"
                  className="form-control"
                  id="exampleFormControlInput1"
                  name="email"
                  value={data.email}
                  onChange={inputEvent}
                  placeholder="name@example.com"
                />
              </div>
              <div className="mb-3">
                <label className="form-label">Message</label>
                <textarea
                  className="form-control"
                  id="exampleFormControlTextarea1"
                  rows="3"
                  name="msg"
                  value={data.msg}
                  onChange={inputEvent}
                ></textarea>
              </div>

              <div className="col-12 mt-5">
                <button className="btn btn-outline-primary " type="submit">
                  Submit form
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
      );
}; 

Answer 1

使用反應片段

 return ( <> {/*use fragments here*/} <div className="my-5"> <h1 className="text-center"> Contact Us </h1> </div> <div className= "container contact_div"> <div className="row"> <div className="col-md-6 col-10 mx-auto"> <form onSubmit={formSubmit}> <div className="mb-3"> <label className="form-label">Full Name</label> <input type="text" className="form-control" id="exampleFormControlInput1" name="fullname" value={data.fullname} onChange={inputEvent} placeholder="name" /> </div> <div className="mb-3"> <label className="form-label">Phone</label> <input type="number" className="form-control" id="exampleFormControlInput1" name="phone" value={data.phone} onChange={inputEvent} placeholder="mobile number" /> </div> <div className="mb-3"> <label className="form-label">Email address</label> <input type="email" className="form-control" id="exampleFormControlInput1" name="email" value={data.email} onChange={inputEvent} placeholder="name@example.com" /> </div> <div className="mb-3"> <label className="form-label">Message</label> <textarea className="form-control" id="exampleFormControlTextarea1" rows="3" name="msg" value={data.msg} onChange={inputEvent} ></textarea> </div> <div className="col-12 mt-5"> <button className="btn btn-outline-primary " type="submit"> Submit form </button> </div> </form> </div> </div> </div> </> ); };

Answer 2

除了您沒有放置包裝元素之外，我看不到任何問題：

如您所述，使用<></> ：

function someComponent() {
  return (
    <>
      <div className="my-5">
        <h1 className="text-center"> Contact Us </h1>
      </div>
      <div className="container contact_div">
        <div className="row">
          <div className="col-md-6 col-10 mx-auto">
            <form onSubmit={formSubmit}>
              <div className="mb-3">
                <label className="form-label">Full Name</label>
                <input
                  type="text"
                  className="form-control"
                  id="exampleFormControlInput1"
                  name="fullname"
                  value={data.fullname}
                  onChange={inputEvent}
                  placeholder="name"
                />
              </div>
              <div className="mb-3">
                <label className="form-label">Phone</label>
                <input
                  type="number"
                  className="form-control"
                  id="exampleFormControlInput1"
                  name="phone"
                  value={data.phone}
                  onChange={inputEvent}
                  placeholder="mobile number"
                />
              </div>
              <div className="mb-3">
                <label className="form-label">Email address</label>
                <input
                  type="email"
                  className="form-control"
                  id="exampleFormControlInput1"
                  name="email"
                  value={data.email}
                  onChange={inputEvent}
                  placeholder="name@example.com"
                />
              </div>
              <div className="mb-3">
                <label className="form-label">Message</label>
                <textarea
                  className="form-control"
                  id="exampleFormControlTextarea1"
                  rows="3"
                  name="msg"
                  value={data.msg}
                  onChange={inputEvent}
                ></textarea>
              </div>

              <div className="col-12 mt-5">
                <button className="btn btn-outline-primary " type="submit">
                  Submit form
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </>
  );
}

Answer 3

在返回之前將所有內容包裝在 1 個 JSX 元素中。

您只能返回 1 個 JSX 元素。 您當前正在嘗試返回 2 個元素（即<div className="my-5">...</div>和<div className= "container contact_div">...</div> ）

人們已經對此給出了解決方案，所以我將總結一下。 您可以在使用返回之前將所有內容包裝在 1 個元素中

1. 片段標簽<React.Fragment>...</React.Fragment> （推薦）
2. 空標簽<>...</>

快樂編碼！