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

Question

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

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

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

除了设置该属性外，还有什么必须做的吗？

谢谢大家， 马可

Answer 1

要检查两件事：

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

Answer 2

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

我的项目正在使用React，我们将React根目录挂载到一个带有静态id的元素，在index.jsp中称为html root。

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

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

在这里你可以看到我写的一个util来创建一个唯一的root并替换占位符（我称之为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"));