模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）：SyntaxError：/home/thibaut/fastmeet/src/components/Header.js：相邻

Question

我需要帮助。我在 StackOverflow 上找不到解决此问题的答案，因此我发布了我的问题。 我收到这个错误： 模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）： SyntaxError：/home/thibaut/fastmeet/src/components/Header.js：相邻的 JSX 元素必须包含在封闭标记中。您想要 JSX 片段<>...吗？ (18:7)

我试图将登录放入 Header.js

Header.js

import React, { Component } from 'react'
import './Header.css'
import { Navbar, NavDropdown, Nav, OverlayTrigger, Tooltip, NavbarBrand } from 'react-bootstrap';
import Events from "react-bootstrap/Button";
// import Login from "react-bootstrap/Button";
// import { NavLink } from 'react-router-dom';
import Login from './components/Login';


class Header extends Component{


  render (){

    return (
      
          <h1>La boîte à recettes de </h1>
       <div className>
         <Login/>

       </div>
    );

  }
}



export default Header;

应用程序.js

import logo from './logo.svg';
import './App.css';
import React, { Component } from 'react'
import Header from './components/Header';


// import Login from './components/Login'

class App extends Component {
//   state = {
//     pseudo: this.props.match.params.pseudo
//   }


render () {
    return (
      <div className="box">
        

      <Header></Header>
      
    
       
     
      </div>
    )
  }

}

export default App;

Answer 1

React JSX 在 return 语句中只接受一个子组件。因此，您可以将多个 HTML 标签包含在一个 div 标签内，或者使用 React 片段

，

<React.Fragment>   
   <h1>La boîte à recettes de </h1>
   <div className>
     <Login/>
   </div>
</React.Fragment>   

或者更好地使用 <>而不是

Answer 2

React JSX 在 return 语句中只接受一个 div 组件。因此，请使用如下 div 将 JSX 括在 header.jsx 中：

import React, { Component } from 'react'
import './Header.css'
import { Navbar, NavDropdown, Nav, OverlayTrigger, Tooltip, NavbarBrand } from 
'react-bootstrap';
import Events from "react-bootstrap/Button";
// import Login from "react-bootstrap/Button";
// import { NavLink } from 'react-router-dom';
import Login from './components/Login';


class Header extends Component{
  render (){
    return (
      <div>
          <h1>La boîte à recettes de </h1>
          <div className><Login/></div>
      </div>
    );
   }
}
export default Header;