【问题标题】：React, Unterminated Header JSX ElementReact，未终止的标头 JSX 元素
【发布时间】：2020-03-04 14:13:33
【问题描述】：

您好，我正在尝试设置一个基本的反应示例，这是我显示页面的代码。你能推荐我如何更好地组成这个元素吗？我要导入到我的应用程序中的 Header.js 有什么问题？

Header.js

import Jumbotron from "react-bootstrap/Jumbotron";
import ButtonGroup from "react-bootstrap/ButtonGroup";
import Button from "react-bootstrap/Button";

export default class Header extends React.Component {
  render() {
    return (
      <Jumbotron fluid>
        <h1 className="header">Welcome to Zach's page</h1>
        <ButtonGroup aria-label="Basic example">
          <Button variant="secondary">Left</Button>
          <Button variant="secondary">Middle</Button>
          <Button variant="secondary">Right</Button>
        </ButtonGroup>
      </Jumbotron>
    );
  }
}

App.js

import React from "react";

// Importing the Bootstrap CSS
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import Header from "../src/Header";
import HeaderNavigation from "../src/HeaderNavigation";
import Form from "../src/Form";
import Body from "../src/Body";

const App = () => (
  <div>
    <div className="container">
      <HeaderNavigation />
      <div className="contents">{this.props.activeRouteHandler()}</div>
    </div>

    <Header />
    <Body>
      <Form />
    </Body>
  </div>
);

export default App;

Apptest.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import Header from "../src/Header";
import HeaderNavigation from "../src/HeaderNavigation";
import Form from "../src/Form";
import Body from "../src/Body";

it("renders without crashing", () => {
  const div = document.createElement("div");
  ReactDOM.render(<App />, <Header />, <HeaderNavigation /> <Form />, <Body />);
  ReactDOM.unmountComponentAtNode(div);
});

错误

'React' is not defined. (no-undef) eslint

Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? 9 | it("renders without crashing", () => { 10 | const div = document.createElement("div"); > 11 | ReactDOM.render(<App />, <Header />, <HeaderNavigation /> <Form />, <Body />); | ^ 12 | ReactDOM.unmountComponentAtNode(div); 13 | }); 14 | (null)

【问题讨论】：

标签： javascript reactjs jsx react-bootstrap

【解决方案1】：

您有一个名为 Jumbotron 的导入，然后尝试将一个类命名为 Jumbotron。更改您的班级名称或为您的导入设置别名。

编辑 1：您需要 import React, {Component} from 'react'; 到您的 Jumbotron 组件。构建反应组件的关键部分。

【讨论】：

请参阅编辑 1。
@ertdiddty 我不明白你所说的import React, {Component} from 'react'; 是什么意思，你指的是什么？我要更改哪个文件？
你的意思是来自#Header.Js#的import React, { Jumbotron } from "react-bootstrap/Jumbotron";