Reactjs 使用jsp集成进行响应
我无法在liferay portlet jsp中加载react bundle index.js。我正在做的是将我的react组件捆绑在index.js中，并尝试在liferay门户jsp中呈现该react组件，但在部署portlet时，我无法在liferay中看到我的react组件呈现 请找到my view.jspReactjs 使用jsp集成进行响应,reactjs,jsp,liferay,liferay-6,spring-portlet-mvc,Reactjs,Jsp,Liferay,Liferay 6,Spring Portlet Mvc,我无法在liferay portlet jsp中加载react bundle index.js。我正在做的是将我的react组件捆绑在index.js中，并尝试在liferay门户jsp中呈现该react组件，但在部署portlet时，我无法在liferay中看到我的react组件呈现 请找到my view.jsp <%@ include file="/WEB-INF/jsp/init.jsp" %> <!DOCTYPE html> <html lang=
<%@ include file="/WEB-INF/jsp/init.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
<b><liferay-ui:message key="react-springmvc-portlet.caption"/></b>
</head>
<body>
<div id="content"></div>
</body>
<script type="text/javascript" src="/dist/index.js"></script>
</html>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="UTF-8">
<title>Grommet</title>
<meta name="description" content="" />
<meta name="fragment" content="!" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon" type="image/png" href="/img/shortcut-icon.png" />
<link rel="apple-touch-icon" sizes="196x196" type="image/png" href="/img/mobile-app-icon.png">
<link rel="stylesheet" type="text/css" href="/index.css">
<style>
body.loading {margin: 0px; width: 100vw; height: 100vh;
background-image: radial-gradient(circle at 50% 15%, #fff, #fff 30%, #ccc);
}
body.loading #content {
position: relative;
width: 100%;
height: 100%;
font-size: 0px;
}
body.loading #logo {
position: absolute; display: block; width: 140px; height: 140px;
top: calc(50vh - 70px); left: calc(50vw - 70px);
}
div.t {
display: inline-block;
box-sizing: border-box;
margin: 0px;
width: 10vw;
height: 10vh;
background-color: #e2e2e2;
}
div.t.on {
-webkit-animation: pulse 3s infinite linear alternate;
-moz-animation: pulse 3s infinite linear alternate;
animation: pulse 3s infinite linear alternate;
}
div.t.on:hover {
-webkit-animation: none;
background-color: #ccc;
}
@-webkit-keyframes pulse {
100% { background-color: #fff; }
}
@-moz-keyframes pulse {
100% { background-color: #fff; }
}
@keyframes pulse {
100% { background-color: #fff; }
</style>
</head>
<body class="loading">
<div id="content" tabindex="-1" style="outline: none;">
<svg id="logo" viewBox="0 0 182 182" version="1.1" role="img">
<path role="presentation"
d="M 91,91 m 0,-82 a 82,82 0 1,1 0,164 a 82,82 0 1,1 0,-164"
stroke-width="18" stroke="#865CD6" fill="none"></path>
</svg>
<script>
var c = document.getElementById("content");
for (var i = 0; i < 100; i += 1) {
c.insertAdjacentHTML('beforeend', '<div class="t off"></div>');
}
var timer = setInterval(function () {
var again = false;
if (document.body.classList.contains('loading')) {
var ts = c.querySelectorAll('div.t.off');
if (ts.length > 0) {
var index = Math.floor(Math.random() * ts.length);
ts[index].classList.remove('off');
ts[index].classList.add('on');
if (ts.length > 1) {
again = true;
}
}
}
if (! again) {
clearInterval(timer);
}
}, 100)
</script>
</div>
<script async src="/index.js"></script>
</body>
</html>
索环
车身承载{余量：0px；宽度：100vw；高度：100vh；
背景图像：径向梯度（50%15%的圆，#fff，#fff 30%，#ccc）；
}
body.loading#内容{
位置：相对位置；
宽度：100%；
身高：100%；
字体大小：0px；
}
body.loading#徽标{
位置：绝对；显示：块；宽度：140px；高度：140px；
顶部：计算器（50vh-70px）；左侧：计算器（50vw-70px）；
}
t组{
显示：内联块；
框大小：边框框；
边际：0px；
宽度：10vw；
高度：10vh；
背景色：#E2；
}
电视台{
-webkit动画：脉冲3s无限线性交替；
-moz动画：脉冲3s无限线性交替；
动画：脉冲3s无限线性交替；
}
分区t.on:悬停{
-webkit动画：无；
背景色：#ccc；
}
@-webkit关键帧脉冲{
100%{背景色：#fff；}
}
@-moz关键帧脉冲{
100%{背景色：#fff；}
}
@关键帧脉冲{
100%{背景色：#fff；}
var c=document.getElementById（“内容”）；
对于（变量i=0；i<100；i+=1）{
c、 insertAdjacentHTML（'beforeed'，''；
}
变量计时器=设置间隔（函数（）{
var=假；
if（document.body.classList.contains（'loading'））{
变量ts=c.querySelectorAll（'div.t.off'）；
如果（ts.length>0）{
var index=Math.floor（Math.random（）*ts.length）；
ts[index].classList.remove（'off'）；
ts[index].classList.add（'on'）；
如果（ts.length>1）{
再次=正确；
}
}
}
如果（！再次）{
清除间隔（计时器）；
}
}, 100)
/WEB-INF//dist/index.JS