如何使用 javascript 块在 JSF 中渲染 React 组件？

Question

我有一个有趣的案例，我必须将 React 组件放入业务应用程序的 JSF 部分中。我尝试使用 来实现这一点，但没有成功。

我从 React 组件导入了块，并将它们放在这里：

然后我使用 像这样：

<ui:composition template="/templates/tempMain.xhtml" xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui">

    <ui:define name="content">
        <h:form id="AdditionalServiceTemplatesForm">
            <p:panel id="additionalServiceTemplatesPanel">
                <div id="ComponentName" style="background-color: white" class="container"></div>
                    <h:outputScript library="js" name="19.649a5d09.chunk.js"/>
                    <h:outputScript library="js" name="runtime-main.d6107f88.js"/>
                    <h:outputScript library="js" name="main.d73a6ff5.chunk.js"/>
                    <h:outputScript library="js" name="hello.js"/>
                <h:form>
                    <h:commandButton onclick = "showMessage();" />
                </h:form>
            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>

普通 javascript 脚本 hello.js (不是块）是可见的并且正在工作，但块中的反应组件未渲染。我所拥有的只是空的 jsf 容器。

另外，控制台中还有信息：

另外，我尝试将块中的相对路径从 static/js 更改为“resources/js”和“javax.faces.resource/js”，并且没有任何路径。什么都不起作用。

编译后，源代码如下所示：