如何在 reactJS 中使用 Thymeleaf th:text
How to use Thymeleaf th:text in reactJS
我是 运行 一个带有 Thymeleaf 和 reactJS 的 springboot 应用程序。所有 HTML 文本都是通过在页面中使用 th:text 从 message.properties 读取的，但是当我在 reactJS HTML 块中有 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 是 Java脚本。您正在动态生成 Java 脚本。仅举几个从长远来看行不通的原因：
- 这会使您的组件难以测试，甚至无法测试。
- 关于应用程序状态的推理将是一场噩梦，因为您将很难弄清楚某个状态的来源是来自 Thymeleaf 还是 JS。
- 如果 Thymeleaf 输出错误的 JS，您的应用程序将完全停止运行。
- 随着时间的推移，这些问题都会变得更糟（Thyme？），因为开发人员会滥用他们可以将服务器端数据呈现给客户端的便利性，从而导致疯狂的应用程序架构。
不要这样做。只用 Thymeleaf，或者只用 React。
替代示例： 我主要从事由 Java 后端支持的 React 应用程序。所以我明白为什么有人会偶然发现这种混合体并认为这可能是个好主意。您可能已经在使用 Thymeleaf 并且正在尝试弄清楚如何避免重写您的 servlet，同时仍然获得 React 的强大功能。
两年前我们处在类似的情况下，只是前端 JSP 老化，但差异可以忽略不计。我们所做的（并且效果很好）是使用 JSP 页面来 bootstrap 整个 React 应用程序。现在我们向用户呈现 one JSP 页面。此 JSP 页面将 JSON 输出到单个 <script> 标记中，该标记包含一些我们必须立即获取的初始启动数据。这包含资源、属性和纯数据。
然后我们输出另一个 <script>，它指向包含整个独立 React 应用程序的已编译 JS 模块的位置。此应用程序在启动时加载一次 JSON 数据，然后对其余数据进行后端调用。在某些地方，我们必须对这些使用 JSP，这不太理想，但仍比您的解决方案好。我们所做的是让 JSP 页面输出一个包含 JSON 的属性。通过这种方式（并通过我们的 XHR 库进行一些仔细的修剪），我们在 JSP 框架之上构建了一个穷人的数据交换层，我们没有时间更改。
它绝对不理想，但效果很好，我们从 React 的许多优点中获益匪浅。当我们确实遇到这个特殊实现的问题时，它们很容易隔离和解决。
可以在 Thymeleaf 中包装 ReactJS 应用程序。想想如果你想要一个静态的持久部分（比如一些链接，甚至只是显示的数据），你可以使用 Thymeleaf。如果你有一个复杂的部分（需要 DOM 重绘、共享数据、来自 UI/Sockets/whatever 的更新），你可以使用 React。
如果您需要传递状态，您可以使用 Redux/other 方法。
您可以让您的后端通过 rest API 将数据发送到 React 部分，然后使用 Thymeleaf 将您的简单部分呈现为片段或整块 HTML。
请记住，Thymeleaf 实际上只是 HTML。 React 是虚拟的 DOM，呈现为 HTML。将一个迁移到另一个实际上相当容易。所以你可以在 Thymeleaf/HTML 中写任何 "Static" 或对 UI 没有太大反应的东西。你也可以只在 React 中渲染这些部分，但没有状态。
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
我是 运行 一个带有 Thymeleaf 和 reactJS 的 springboot 应用程序。所有 HTML 文本都是通过在页面中使用 th:text 从 message.properties 读取的，但是当我在 reactJS HTML 块中有 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 是 Java脚本。您正在动态生成 Java 脚本。仅举几个从长远来看行不通的原因：
- 这会使您的组件难以测试，甚至无法测试。
- 关于应用程序状态的推理将是一场噩梦，因为您将很难弄清楚某个状态的来源是来自 Thymeleaf 还是 JS。
- 如果 Thymeleaf 输出错误的 JS，您的应用程序将完全停止运行。
- 随着时间的推移，这些问题都会变得更糟（Thyme？），因为开发人员会滥用他们可以将服务器端数据呈现给客户端的便利性，从而导致疯狂的应用程序架构。
不要这样做。只用 Thymeleaf，或者只用 React。
替代示例： 我主要从事由 Java 后端支持的 React 应用程序。所以我明白为什么有人会偶然发现这种混合体并认为这可能是个好主意。您可能已经在使用 Thymeleaf 并且正在尝试弄清楚如何避免重写您的 servlet，同时仍然获得 React 的强大功能。
两年前我们处在类似的情况下，只是前端 JSP 老化，但差异可以忽略不计。我们所做的（并且效果很好）是使用 JSP 页面来 bootstrap 整个 React 应用程序。现在我们向用户呈现 one JSP 页面。此 JSP 页面将 JSON 输出到单个 <script> 标记中，该标记包含一些我们必须立即获取的初始启动数据。这包含资源、属性和纯数据。
然后我们输出另一个 <script>，它指向包含整个独立 React 应用程序的已编译 JS 模块的位置。此应用程序在启动时加载一次 JSON 数据，然后对其余数据进行后端调用。在某些地方，我们必须对这些使用 JSP，这不太理想，但仍比您的解决方案好。我们所做的是让 JSP 页面输出一个包含 JSON 的属性。通过这种方式（并通过我们的 XHR 库进行一些仔细的修剪），我们在 JSP 框架之上构建了一个穷人的数据交换层，我们没有时间更改。
它绝对不理想，但效果很好，我们从 React 的许多优点中获益匪浅。当我们确实遇到这个特殊实现的问题时，它们很容易隔离和解决。
可以在 Thymeleaf 中包装 ReactJS 应用程序。想想如果你想要一个静态的持久部分（比如一些链接，甚至只是显示的数据），你可以使用 Thymeleaf。如果你有一个复杂的部分（需要 DOM 重绘、共享数据、来自 UI/Sockets/whatever 的更新），你可以使用 React。
如果您需要传递状态，您可以使用 Redux/other 方法。
您可以让您的后端通过 rest API 将数据发送到 React 部分，然后使用 Thymeleaf 将您的简单部分呈现为片段或整块 HTML。
请记住，Thymeleaf 实际上只是 HTML。 React 是虚拟的 DOM，呈现为 HTML。将一个迁移到另一个实际上相当容易。所以你可以在 Thymeleaf/HTML 中写任何 "Static" 或对 UI 没有太大反应的东西。你也可以只在 React 中渲染这些部分，但没有状态。
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