我正在使用 Thymeleaf 和 reactJS 运行 springboot 应用程序。通过在页面中使用 th:text 从 message.properties 读取所有 HTML 文本，但是当我在 reactJS HTML 块中有 th:text 时，reactJS 似乎对此很生气。
render() {
return (
<input type="text" th:text="#{home.welcome}">
)
}
错误是：
Namespace tags are not supported. ReactJSX is not XML.
除了使用 dangerouslySetInnerHTML 之外，还有其他方法吗？
谢谢！
【问题讨论】：
标签： html spring reactjs spring-boot thymeleaf
没有合理的解决方法。
您收到此错误是因为 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 的许多优点中受益匪浅。当我们确实遇到这种特殊实现的问题时，它们很容易隔离和解决。
【讨论】：
可以在 Thymeleaf 中包装 ReactJS 应用程序。想想如果你想要一个静态的持久部分（比如一些链接，甚至只是显示的数据），你可以使用 Thymeleaf。如果你有一个复杂的部分（需要 DOM 重绘、共享数据、从 UI/Sockets 更新的东西），你可以使用 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;
}
【讨论】：
现在您可以使用数据前缀属性（例如data-th-text="${message}"）。
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#support-for-html5-friendly-attribute-and-element-names
【讨论】：