我正在运行一个带有Thymeleaf和reactJS的springboot应用程序。所有的HTML文本都是message.properties通过使用页面中的th：text从www.example.com中读取的，但是当我在reactJS HTML块中有th：text时，reactJS似乎对此很生气。
render() {
return (
<input type="text" th:text="#{home.welcome}">
)
}字符串
错误是：
Namespace tags are not supported. ReactJSX is not XML.型
除了使用dangerouslySetInnerHTML之外，是否还有其他的解决方法？
谢谢你，谢谢
4条答案
按热度按时间pprl5pva1#
没有合理的解决办法
您会得到此错误，因为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的许多优点中受益匪浅。当我们确实遇到这种特殊实现的问题时，它们很容易被隔离和解决。
lawou6xi2#
可以将ReactJS应用程序 Package 在Thymeleaf中。如果你想要一个静态的持久部分（比如一些链接，甚至只是显示数据），你可以使用Thymeleaf。如果你有一个复杂的部分（需要DOM重绘，共享数据，从UI/Sockets/任何地方更新），你可以使用React。
如果你需要传递状态，你可以使用Redux/其他方法。
你可以让你的后端通过REST API将数据发送到React部分，然后使用Thymeleaf将简单的部分渲染为片段或整个纯HTML块。
记住，Thymeleaf实际上只是HTML。React是一个虚拟DOM，呈现为HTML。实际上，将一个迁移到另一个相当容易。所以你可以用Thymeleaf/HTML写任何“静态”的东西，或者对UI没有太多响应的东西。你也可以在React中渲染这些部分，但没有State。
Thymeleaf 3允许你render variables from your Java to a separate JS file。所以这也是传递到JSX的一个选项
第一个月
e0bqpujr3#
现在您可以使用数据前缀属性（例如
data-th-text="${message}"）。https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#support-for-html5-friendly-attribute-and-element-namesibps3vxo4#
我认为你应该反转你的实现，而不是让React Code渲染Thymeleaf html，你的Thymeleaf html应该使用你的react组件（并通过Props向React组件发送信息）