Question

我无法将响应包index.js加载到liferay portlet jsp中。我正在做的事情是将我的react组件捆绑在index.js中，并尝试在我的liferay门户jsp中呈现该react组件，但是我无法部署portlet时，看到我的react组件在liferay中呈现

请找到我的view.jsp

<%@ 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>

我的index.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>

Answer 1

基于您编写JSP的方式，并在JSP的路径中包括/WEB-INF/，我假设您正在使用Liferay6.x。

我不能完全帮助您做出反应，但也许可以指导您正确的方向：

首先：在门户世界中，您的portlet的view.jsp不得具有<html>，<head>和<body>标记，因为portlet仅作为部分内容呈现。页。

接下来，验证view.jsp中包含的JS包含-最有可能导致404错误：将view.jsp发送到浏览器时，其URL将相对于Liferay，而不是相对于您的插件的Web应用程序上下文。因此，对于您的情况/dist/index.js，您必须手动重新创建该上下文。使用浏览器的开发者工具检查请求页面的位置并进行调整。

处理此问题的最佳方法是只为需要包含在liferay-portlet.xml中的JS包含一个适当的声明。 DTD可用并且有据可查，可以找到合适的项目（例如，选中footer-portlet-javascript或搜索其他“ javascript”出现，为您使用的实际版本改编URL）

我不确定您如何从index.js转到index.html。再次-如果文件包含在页面中：您不需要<html>和<body>标记。如果最终要在iframe中渲染，则可以这样做。再次，检查开发人员工具中的404错误，以便您找出如何处理html文件。

与jsp集成反应

1 个答案: