Question

我正在使用Thymeleaf和reactJS运行springboot应用程序。所有HTML文本都是通过在页面中使用th：text从message.properties中读取的，但是当我在reactJS HTML块中有文本时，reactJS似乎对此感到愤怒。

render() {
  return (
      <input type="text" th:text="#{home.welcome}">
  )
}

错误是：

Namespace tags are not supported. ReactJSX is not XML.

除了使用dangerouslySetInnerHTML之外还有一个解决方法吗？

谢谢！

Answer 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的众多优势中获益匪浅。当我们确实遇到这种特殊实现的问题时，它们很容易被孤立和解决。

Answer 2

可以在Thymeleaf中包装ReactJS应用程序。想想你是否想要一个静态持久性部分（比如一些链接，甚至只是显示的数据），你可以使用Thymeleaf。如果你有一个复杂的部分（需要DOM重新绘制，共享数据，UI /套接字/更新的更新），你可以使用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; }

Answer 3

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

如何使用Thymeleaf：reactJS中的文本

3 个答案: