ReactJS 开发的 .jsx 文件中的语法错误

Question

嗨，我已经开始学习 ReactJS，我已经很难将一个组件插入另一个组件。

它说 < Header /> 存在语法错误

知道为什么吗？

App.jsx

import React from 'react';
import {Header} from './Header.jsx';

class App extends React.Component {
   render() {
   var myStyle = {
   fontSize:100,
   color:'black'
   }
      return (
         <div style={myStyle}>
            Hello World!!! this is taking so long
         </div>

         <Header/>
      );
   }
}
export default App;

Header.js

import React, { Component} from 'react';

class Header extends React.Component {
   render() {
      return (
         <div className="myHeader">
            header
         </div>
      );
   }
}

export default Header;

Answer 1

您的组件的内容必须包含在单个标记中。

return (
     <div>
         <div style={myStyle}>
            Hello World!!! this is taking so long
         </div>

         <Header/>
     </div>
);

ReactJS 开发的 .jsx 文件中的语法错误

Syntax error in .jsx file for ReactJS development

reactjs

mean-stack