在 reactjs 中编译时出现相邻的 JSX 错误答案

【问题标题】：Adjacent JSX error during compiling in reactjs在 reactjs 中编译时出现相邻的 JSX 错误
【发布时间】：2018-04-20 05:05:10
【问题描述】：

return (

  <Router>
    <div className="banner" >
  <div >
    <ul>
       <li><Link className="a" to={'/'}>•Home</Link></li>
       <li><Link className="a" to={'/about'}>•About</Link></li>     
       <li><Link className="a" to={'/LoginForm'}>•Login</Link></li>
       <li><Link className="a" to={'/gallery'}>•Gallery</Link></li>
       <li><Link className="a"to={'/services'}>•Services</Link></li>
       <li><Link className="a"to={'/contact'}>•Contact</Link></li>
     </ul>
    </div>
      <hr/>

      <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/LoginForm" component={LoginForm}/>
      <Route path="/gallery" component={Gallery}/>
      <Route path="/services" component={Services}/>
      <Route path="/contact" component={Contact}/>
      </Switch>
    </div>

  </Router>

  <div className="w3-content w3-display-container">
  <img className="mySlides" src={image1.jpg} style="width:100%">
  <img className="mySlides" src={image2.jpg} style="width:100%">
  <img className="mySlides" src={image3.jpg} style="width:100%">
  <img className="mySlides" src={image4.jpg} style="width:100%">
  <img className="mySlides" src={image5.jpg} style="width:100%">
  <img className="mySlides" src={image6.jpg} style="width:100%">
  </div>


    );

这是我的代码..但是语法错误：E:/Projects/react-redux-login/src/components/HomePage/HomePage.js: 相邻的 JSX 元素必须包含在封闭标记中 (42:6 ) 发生错误。我需要进行哪些更改？路由器标签关闭和div之间发生错误..

【问题讨论】：

Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag的可能重复

标签： reactjs redux-form

【解决方案1】：

您需要将代码包装到单个父容器中。你可以这样做：

return (
 <div>
  <Router>
   <div className="banner" >
    <div >
     <ul>
      <li><Link className="a" to={'/'}>•Home</Link></li>
      <li><Link className="a" to={'/about'}>•About</Link></li>     
      <li><Link className="a" to={'/LoginForm'}>•Login</Link></li>
      <li><Link className="a" to={'/gallery'}>•Gallery</Link></li>
      <li><Link className="a"to={'/services'}>•Services</Link></li>
      <li><Link className="a"to={'/contact'}>•Contact</Link></li>
     </ul>
    </div>
    <hr/>

    <Switch>
     <Route exact path="/" component={Home} />
     <Route path="/about" component={About} />
     <Route path="/LoginForm" component={LoginForm}/>
     <Route path="/gallery" component={Gallery}/>
     <Route path="/services" component={Services}/>
     <Route path="/contact" component={Contact}/>
    </Switch>
  </div>
 </Router>

 <div className="w3-content w3-display-container">
  <img className="mySlides" src={image1.jpg} style="width:100%">
  <img className="mySlides" src={image2.jpg} style="width:100%">
  <img className="mySlides" src={image3.jpg} style="width:100%">
  <img className="mySlides" src={image4.jpg} style="width:100%">
  <img className="mySlides" src={image5.jpg} style="width:100%">
  <img className="mySlides" src={image6.jpg} style="width:100%">
  </div>
 </div>
)

【讨论】：

如果你使用 React 16.x，你可以使用 React.Fragment 或 <> - 这样你就不会改变 DOM 输出。