如何使用Thymeleaf:reactJS中的文本

时间:2016-02-19 16:57:37

标签: html spring reactjs spring-boot thymeleaf

我正在使用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之外还有一个解决方法吗?

谢谢!

3 个答案:

答案 0 :(得分:22)

没有合理的解决方法。

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

答案 1 :(得分: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; }

答案 2 :(得分:1)

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