如何在jsp页面Spring boot中导入react组件 [英] How to import react component in jsp page Spring boot
问题描述
我正在创建 Spring Boot 应用程序，我希望我的前端与 React 一起使用.问题出在我找不到将 react 组件正确集成到我的 jsp 页面中的方法.
I am creating Spring boot application and i want my frontend to be with React. The problem comes from the fact that i cannot find a way to properly integrate the react component in my jsp page.
这是组件的声明:
ReactDOM.render(<App />, document.getElementById('root'));
我想指出我的 jsp 页面在 WEB-INF 目录中，我可以通过控制器成功重定向到它，但是我的组件导入不起作用并且不会引发错误！
I want to point out that my jsp page is inside WEB-INF directory and i can successfully redirect to it via a controller, but my import of the component does not work and does not throw an error!
我尝试通过元素 id 导入它:
I tried to import it by the element id:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Intellij is trash</title>
</head>
<body>
ala bala
<div id="root"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
</body>
</html>
是我做错了什么还是错过了一些配置?
Am i doing something wrong or missed some configuration?
提前感谢您的帮助！
推荐答案
导入 React 和 ReactDOM 脚本后，在您编写组件 App 的地方导入另一个脚本.假设它在 App.js 中，
After importing the React and ReactDOM scripts, import another script where you have written your component App. Assuming it is in App.js,
<script src="App.js"></script>
现在您需要在 id="root" 的 div 中渲染组件.我将使用 babel 进行编译，但你也可以不用它.所以导入后写:
Now you need to render the component in the div with id="root". I will use babel to compile but you can do without it too. So after the import write:
<script type="text/babel">
ReactDOM.render(<App />, document.getElementById('root'));
</script>
结论:基本上你需要按这个顺序导入4个文件:React、ReactDOM、Babel和你的component.js文件.然后你需要在 div 中渲染组件才能让它工作.
Conclusion: Basically you need to import 4 files in this order: React, ReactDOM, Babel and your component.js files. Then you need to render the component in the div for it to work.
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script src="App.js"></script>
<script type="text/babel">
ReactDOM.render(<App />, document.getElementById('root'));
</script>
这篇关于如何在jsp页面Spring boot中导入react组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
