Liferay 可实例化的 portlet 无法正常工作答案

【问题标题】：Liferay instanceable portlet does not work properlyLiferay 可实例化的 portlet 无法正常工作
【发布时间】：2017-03-11 07:34:34
【问题描述】：

我创建了一个自定义可实例化的 portlet，将 instanceable 属性设置为 true：

<portlet>
    <portlet-name>portletFiltriPTF</portlet-name>
    <instanceable>true</instanceable>       
    <header-portlet-javascript>/js/mediolanumadvice/portletFiltriPTF.js</header-portlet-javascript>
</portlet>

问题是我可以在同一个页面中多次插入 portlet，但只有其中一个内容是可见的，如下图所示：

除了设置该属性之外，我还需要做什么吗？

谢谢大家，马可

【问题讨论】：

标签： liferay liferay-6

【解决方案1】：

要检查两件事：

您可能在页面上有一个（仍然）不可实例化的 portlet，因为您在使 portlet 可实例化之前添加了它。它们现在具有不同的 ID，需要从页面中删除
您可能会使用有冲突的 ID - 例如如果两个 portlet 创建具有相同 ID 的内容，它们将最终出现在 DOM 中。将这些用于格式化或通过 JS 进行任何处理，就会发生奇怪的事情。

【讨论】：

【解决方案2】：

我不确定这是否会对原始海报有所帮助，但万一其他人遇到这个......

我的项目正在使用 React，我们将 React 根安装到 index.jsp 中具有静态 id 的元素，称为 html 根。

当您尝试在一个页面上实例化同一个 portlet 的多个实例时，后续实例将不会呈现，因为存在多个具有相同 id 的元素。

解决方案是创建一个您自己的实例 id 并创建一个新元素来替换 html 根，以便 html 根成为占位符。由于每次添加 portlet 实例时都会删除 html 元素，因此您可以可靠地多次挂载 React 根目录而不会出现问题。

在这里你可以看到我写的一个工具来创建一个唯一的根并替换占位符（我称之为 RootUtil）：

export default { 

makeId: function(length) {
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for( var i=0; i < length; i++ )
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
},

renderRoot: function(placeholderId) {

    // create unique id
    var instanceId = this.makeId(10);
    var id = "react-root-instance-" + instanceId;

    // create unique root
    var root = document.createElement("div");
    root.setAttribute("id", id);

    // find placeholder
    const placeholder = document.getElementById(placeholderId);

    // replace placeholder
    //placeholder.replaceWith(root); **breaks in IE**
    placeholder.parentElement.replaceChild(root, placeholder); //workaround

    // return the new element
    return document.getElementById(id);
}}

我在这里称它为：

ReactDOM.render(
    <Provider store={Store}>
      <div>
        ...
      </div>
    </Provider>, 
    RootUtil.renderRoot("html-root"));

【讨论】：