Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
所以我在我的应用程序中使用反应js和spring boot . 我已经成功配置了webpack（我认为），但我遇到的问题是加载HTML页面后它不会在“div”标签中呈现任何内容 . :(
App.js
import {React} from 'react';
import {ReactDOM} from 'react-dom';
const client = require('./client');
//import css from "./App.css";
import {NavBar} from './navbar';
import {Home} from './home';
//const index = require('/alpha/src/main/resources/templates/index.html');
const heroImageStyling = {
height: 200,
width: 200
};
class App extends React.Component {
state = {
products: [
{ id: 1, value: 0, name: "Item 1" },
{ id: 2, value: 0, name: "Item 2" },
{ id: 3, value: 0, name: "Item 3" },
{ id: 4, value: 0, name: "Item 3" },
{ id: 5, value: 0, name: "Item 3" },
{ id: 6, value: 0, name: "Item 4" },
{ id: 7, value: 0, name: "Item 4" },
{ id: 8, value: 0, name: "Item 5" }
]
};
constructor(props) {
super(props);
this.state = {products: []};
}
componentDidMount() {
client({ method: "GET", path: "/" }).done(response => {
this.setState({ products: response.entity._embedded.products });
});
}
handleDelete = id => {
console.log("event handled", id);
};
handleNavBarCartIncrement = product => {
const products = [...this.state.products];
const index = products.indexOf(product);
products[index] = { ...product };
products[index].value++;
this.setState({ products });
console.log(product);
};
render() {
return (
<React.Fragment>
<NavBar
cartItems={this.state.products.filter(c => c.value > 0).length}
/>
<main className="container">
<Home
products={this.state.products}
onIncrement={this.handleNavBarCartIncrement}
onDelete={this.handleDelete}
/>
</main>
</React.Fragment>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('react')
)
的index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
<meta charset="UTF-8"/>
<title>ReactJS + Spring Data REST</title>
<link rel="stylesheet" href="/main.css" />
</head>
<body>
<div id="react"></div>
<script src="/built/bundle.js"></script>
</body>
</html>
我的index.html用于获取react组件，但除了没有任何标签之外没有显示任何标签 . 但它也不是那样做的 . 现在它不会检索任何东西，但它会得到以下错误 .
1 回答
您必须导入React，ReactDom和没有花括号的类 .
如果使用export default导出文件，则不需要使用花括号，如果仅使用export，则必须使用{}
另一件事是，如果您不想自己配置webpack和bable，可以使用
create-react-app命令创建一个新的反应项目，并且将为您设置所有反应项目 .命令是： npx create-react-app myApp