реагировать с интеграцией jsp

Я не могу загрузить реагирующий пакет index.js в портлете liferay jsp. Что я делаю, так это связываю свой реагирующий компонент в index.js и пытаюсь отобразить этот реагирующий компонент в моем портале liferay jsp, но я не могу увидеть свою реакцию рендеринг компонента в 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>

reactjs liferay jsp spring-portlet-mvc liferay-6
person chandu    schedule 26.07.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Исходя из того, как вы пишете свой JSP и включаете /WEB-INF/ в путь к вашим JSP, я предполагаю, что вы работаете над Liferay 6.x.

Я не могу полностью помочь вам с реакцией, но, возможно, направлю вас в правильном направлении:

Прежде всего: в мире портала ваш портлет view.jsp не должен иметь тегов <html>, <head> и <body>, так как портлет будет отображаться только как часть страницы.

Затем проверьте включение JS, которое есть в вашем view.jsp — скорее всего, это приведет к ошибке 404: когда ваш view.jsp отправляется в браузер, его URL-адрес будет относиться к Liferay, а не к контексту веб-приложения вашего плагина. . Таким образом, вы должны вручную воссоздать этот контекст, в вашем случае /dist/index.js. Проверьте с помощью инструментов разработчика вашего браузера, откуда запрашивается страница, и внесите коррективы.

Лучший способ решить эту проблему — просто включить соответствующее объявление для JS, которое необходимо включить в файл liferay-portlet.xml. DTD доступен и хорошо задокументирован, чтобы найти соответствующий элемент (например, проверьте footer-portlet-javascript или найдите другие вхождения 'javascript', адаптируйте URL-адрес для фактической версии, которую вы используете)

Я не уверен, как вы переходите от index.js к index.html. Опять же, если файл включен на вашу страницу: вам не нужна разметка <html> и <body>. Если в конечном итоге он будет отображаться в iframe, вы это сделаете. Опять же, проверьте наличие ошибок 404 в своих инструментах разработчика, чтобы понять, как обращаться к html-файлу.

person Olaf Kock    schedule 26.07.2018