如何使用Thymeleaf:reactJS中的文本

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/Sockets 的更新等），你可以使用 React。

如果您需要传递状态，您可以使用 Redux/其他方法。

您可以让后端通过 rest API 将数据发送到 React 部分，然后使用 Thymeleaf 将您的简单部分呈现为片段或整块纯 HTML。

请记住，Thymeleaf 实际上只是 HTML。React 是呈现为 HTML 的虚拟 DOM。将一个迁移到另一个实际上相当容易。因此，您可以在 Thymeleaf/HTML 中编写任何“静态”或对 UI 没有太多响应的内容。你也可以在 React 中渲染这些部分，但没有 State。

Thymeleaf 3 允许您将Java 中的变量呈现到单独的 JS 文件中。所以这也是传入 JSX 的一个选项

function showCode() { var code = /*[[${code}]]*/ '12345'; document.getElementById('code').innerHTML = code; }