相邻的 JSX 元素必须包含在封闭标记中 (34:0)答案

【问题标题】：Adjacent JSX elements must be wrapped in an enclosing tag (34:0)相邻的 JSX 元素必须包含在封闭标记中 (34:0)
【发布时间】：2021-04-05 09:20:58
【问题描述】：

这是我一直在尝试创建的联系页面。我一直在尝试编译它，但是给了我一个 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>
      );
};

【问题讨论】：

您的第一个 <div> 包含您的 <h1> 与其余部分相邻。

标签： javascript html reactjs

【解决方案1】：

在返回之前将所有内容包装在 1 个 JSX 元素中。

您只能返回 1 个 JSX 元素。您目前正在尝试返回 2 个元素（即 <div className="my-5">...</div> 和 <div className= "container contact_div">...</div>）

人们已经给出了解决方案，所以我只是总结一下。您可以在使用返回之前将所有内容包装在 1 个元素中

片段标签<React.Fragment>...</React.Fragment>（推荐）
空标签<>...</>

编码愉快！

【讨论】：

【解决方案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>
    </>
  );
}

【讨论】：

是的，我删除了一个额外的结束 div 标签并添加了 >。成功了

【解决方案3】：

使用react fragments

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

【讨论】：