反应，未终止 Header JSX 元素
[英]React, Unterminated Header JSX Element
问题描述
Hi I am trying to set up a basic example of react, this is my code to show the page.
嗨，我正在尝试设置一个基本的反应示例，这是我显示页面的代码。 Could you recommend how I can compose this element better.你能推荐我如何更好地组成这个元素吗？ What is wrong with my Header.js that I am importing into my app?我要导入应用程序的 Header.js 有什么问题？
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应用程序.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应用测试.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);
});
the Errors错误
'React' is not defined. (no-undef) eslint
/src/Jumpotron.js: Unterminated JSX contents (16:14) 14 | <Button variant="secondary">Middle</Button> 15 | <Button variant="secondary">Right</Button> > 16 | </ButtonGroup> | ^ 17 |
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)
1 个解决方案
解决方案1
0 已采纳 2019-11-07 23:26:51
You have an import named Jumbotron then trying to name a class Jumbotron .您有一个名为Jumbotron的导入，然后尝试命名 class Jumbotron 。 Either change your class name or alias your import.更改您的 class 名称或为您的导入设置别名。
EDIT 1: You need import React, {Component} from 'react';编辑 1：您需要import React, {Component} from 'react'; to your Jumbotron component.到您的Jumbotron组件。 Key piece for building react components.构建反应组件的关键部分。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.