Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Так что я использую реагирование JS с пружинной загрузкой в моем приложении.Я успешно настроил веб-пакет (я думаю), но у меня проблема в том, что после загрузки 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 использовался для получения компонента реакции, но сделалне отображать ничего, кроме тега, без чего-либо. Но он также не делает этого. Теперь он ничего не получает, но вместо этого он получает следующие ошибки.