我正在使用 Thymeleaf 和 reactJS 运行 springboot 应用程序。通过在页面中使用 th:text 从 message.properties 读取所有 HTML 文本，但是当我在 reactJS HTML block 中有 th:text 时，reactJS 似乎对此很生气。
render() {
return (
<input type="text" th:text="#{home.welcome}">
)
}
错误是:
Namespace tags are not supported. ReactJSX is not XML.
除了使用 dangerouslySetInnerHTML 之外，还有其他方法吗？
谢谢!
最佳答案
没有合理的解决方法。
您收到此错误是因为 Thymeleaf 输出 XML，而 JSX 解析器不解析 XML。
您这样做是因为 JSX 看起来非常非常类似于 XML。但它们是非常非常不同的，即使你以某种方式破解 Thymeleaf 以剥离命名空间属性并设法让组件呈现，这也只是一个转瞬即逝的时刻，即 会在进一步使用时分崩离析。
这是一个非常非常糟糕的主意，因为 JSX 是 Javascript。您正在动态生成 Javascript。仅举几个从长远来看不会奏效的原因:
- 这会使您的组件难以测试，甚至无法测试。
- 推理应用程序状态将是一场噩梦，因为您将难以弄清楚某个状态的来源是来自 Thymeleaf 还是 JS。
- 如果 Thymeleaf 输出错误的 JS，您的应用程序将完全停止运行。
- 随着时间的推移(Thyme？)，这些问题都会变得更糟，因为开发人员滥用了将服务器端数据呈现给客户端的便利性，从而导致了疯狂的应用架构。
不要这样做。只需使用 Thymeleaf，或仅使用 React。
替代示例:我主要从事由 Java 后端支持的 React 应用程序。所以我理解有人会偶然发现这种混合体，并认为这可能是一个好主意。您可能已经在使用 Thymeleaf 并试图弄清楚如何避免重写您的 servlet，但仍能获得 React 的强大功能。
两年前我们也遇到过类似的情况，只是 JSP 前端老化了，但差别可以忽略不计。我们所做的(并且效果很好)是使用 JSP 页面来引导整个 React 应用程序。现在我们向用户呈现一个 JSP 页面。此 JSP 页面将 JSON 输出为单个 <script>包含一些初始启动数据的标签，否则我们必须立即获取这些数据。这包含资源、属性和纯数据。
然后我们输出另一个 <script>它指向包含整个独立 React 应用程序的已编译 JS 模块的位置。此应用程序在启动时加载一次 JSON 数据，然后对其余部分进行后端调用。在某些地方，我们必须为此使用 JSP，这不太理想，但仍比您的解决方案好。我们所做的是让 JSP 页面输出一个包含 JSON 的属性。通过这种方式(并且通过我们的 XHR 库进行了一些仔细的修剪)，我们得到了一个构建在我们没有时间更改的 JSP 框架之上的穷人的数据交换层。
这绝对不是理想的，但它运行良好，我们从 React 的许多优点中受益匪浅。当我们确实遇到这种特殊实现的问题时，它们很容易隔离和解决。
关于html - 如何使用 Thymeleaf th :text in reactJS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35510634/