我正在使用Thymeleaf和reactJS运行springboot应用程序。所有HTML文本都是通过在页面中使用th:text从message.properties中读取的,但是当我在reactJS HTML块中有文本时,reactJS似乎对此感到愤怒。
render() {
return (
<input type="text" th:text="#{home.welcome}">
)
}
错误是:
Namespace tags are not supported. ReactJSX is not XML.
除了使用dangerouslySetInnerHTML之外还有一个解决方法吗?
谢谢!
答案 0 :(得分:22)
没有合理的解决方法。
您收到此错误是因为Thymeleaf输出XML,而JSX解析器不解析XML。
你这样做是因为JSX看起来非常非常类似于XML。但它们非常非常不同,即使你以某种方式攻击了Thymeleaf来剥离命名空间属性并设法获得一个组件来呈现,它只是一个短暂的管道绑定,陪审团操纵的代码 会在进一步使用时崩溃。
这是一个非常非常糟糕的主意,因为JSX是Javascript。您正在动态生成Javascript。仅举几个原因,从长远来看,这将不起作用:
不要这样做。只需使用Thymeleaf,或者只使用React。
示例替代方案:我主要处理由Java后端支持的React应用程序。所以我理解有人可能会偶然发现这种混合动力,并认为这可能是一个好主意。您可能已经在使用Thymeleaf并且正在试图弄清楚如何避免重写您的servlet但仍然可以获得React的强大功能。
两年前我们在类似的船上,除了老化的JSP前端,但差别可以忽略不计。我们所做的(并且运行良好)是使用JSP页面来引导整个React应用程序。现在有一个一个 JSP页面,我们呈现给用户。此JSP页面将JSON输出到单个<script>
标记中,该标记包含一些我们原本必须立即获取的初始启动数据。它包含资源,属性和纯数据。
然后我们输出另一个<script>
,指向包含整个独立React应用程序的已编译JS模块的位置。此应用程序在启动时加载JSON数据一次,然后对其余数据进行后端调用。在某些地方,我们必须使用JSP,这不是理想的,但仍然比你的解决方案更好。我们所做的是让JSP页面输出一个包含JSON的属性。通过这种方式(并通过我们的XHR库进行一些仔细的修剪),我们得到了一个在JSP框架上构建的穷人数据交换层,我们没有时间去改变。
这绝对不是理想的,但它运作良好,我们从React的众多优势中获益匪浅。当我们确实遇到这种特殊实现的问题时,它们很容易被孤立和解决。
答案 1 :(得分:2)
可以在Thymeleaf中包装ReactJS应用程序。想想你是否想要一个静态持久性部分(比如一些链接,甚至只是显示的数据),你可以使用Thymeleaf。如果你有一个复杂的部分(需要DOM重新绘制,共享数据,UI /套接字/更新的更新),你可以使用React。
如果您需要通过状态,可以使用Redux /其他方法。
您可以让后端通过rest API将数据发送到React部分,然后使用Thymeleaf将简单部分渲染为片段或整个纯HTML块。
请记住,Thymeleaf实际上只是HTML。 React是呈现为HTML的虚拟DOM。将一个迁移到另一个实际上相当容易。因此,您可以在Thymeleaf / HTML中编写任何“静态”或对UI没有太多响应的内容。你也可以在React中渲染这些部分,但是没有State。
Thymeleaf 3允许你render variables from your Java to a separate JS file。所以这也是传递给JSX的选项
function showCode() {
var code = /*[[${code}]]*/ '12345';
document.getElementById('code').innerHTML = code;
}
答案 2 :(得分:1)
现在,您可以使用数据前缀属性(例如data-th-text="${message}"
)。
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#support-for-html5-friendly-attribute-and-element-names