如何在 reactJS 中使用 Thymeleaf th:text

Posted 2023-02-26

【中文标题】如何在 reactJS 中使用 Thymeleaf th:text

【英文标题】：How to use Thymeleaf th:text in reactJS

【发布时间】：2016-06-01 08:10:41

【问题描述】：

我正在使用 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 之外，还有其他方法吗？

谢谢！

【参考方案1】：

没有合理的解决方法。

您收到此错误是因为 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 的许多优点中受益匪浅。当我们确实遇到这种特殊实现的问题时，它们很容易隔离和解决。

【讨论】：

感谢您的回复，我对前端很陌生，刚刚学习和试验 Thymeleaf 和 reactJS。我主要使用 Thymeleaf 进行模板化和内化。我关注spring.io/guides/tutorials/react-and-spring-data-rest，并认为这是理所当然的，因为它是 spring.io 中的指南

指南告诉你把它放在 React div 之前，他们的意思是把它放在引导 React.js 的 index.html 文件中的 React 容器之前。这很好，因为它是一个 HTML 文件，而不是 JSX，并且 React 无法与之交互。没有将两者混合的例子。欢迎使用 React！

在脚本标签中删除启动数据是完美的。

【参考方案2】：

可以在 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;

【参考方案3】：

现在您可以使用数据前缀属性（例如data-th-text="$message"）。 https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#support-for-html5-friendly-attribute-and-element-names