如何在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似乎对此感到恼火.

I am running a springboot application with Thymeleaf and reactJS. All the HTML text are read from message.properties by using th:text in the pages, but when I have th:text in reactJS HTML block, reactJS seems angry about it.

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

错误是:

Namespace tags are not supported. ReactJSX is not XML.

除了使用dragonallySetInnerHTML外，还有其他解决方法吗?

Is there a walkaround besides using dangerouslySetInnerHTML?

谢谢！

推荐答案

没有理智的解决方法.

由于Thymeleaf输出XML，而JSX解析器无法解析XML，因此您会收到此错误.

You are getting this error because Thymeleaf outputs XML, and JSX parsers do not parse XML.

之所以这样做，是因为JSX看起来非常类似于XML.但是它们是非常非常不同的，即使您以某种方式入侵了Thymeleaf以剥离命名空间的属性并设法使组件得以呈现，这也是由将在进一步使用中瓦解.

You did this because JSX looks very, very similar to XML. But they are very, very different, and even if you somehow hacked Thymeleaf to strip namespaced attributes and managed to get a component to render, it would be merely a fleeting moment of duct-taped-together, jury-rigged code that will fall apart under further use.

这是一个非常非常糟糕的主意，因为JSX是Javascript.您正在即时生成Javascript.仅出于几个原因，这从长远来看是行不通的:

This is a really, really bad idea because JSX is Javascript. You are generating Javascript on the fly. Just to name a few reasons this will not work in the long term:

• 这使您的组件难以甚至无法测试.
• 重新考虑应用程序状态将是一场噩梦，因为您将很难确定某个状态的来源是来自Thymeleaf还是JS.
• 如果Thymeleaf输出不良的JS，您的应用程序将完全停止运行.
• 随着时间的流逝，这些问题都会变得越来越严重(百里香?)，因为开发人员滥用了将服务器端数据呈现给客户端的便捷性，从而导致了疯狂的应用程序体系结构.

请勿执行此操作.只需使用Thymeleaf或使用React.

Do not do this. Just use Thymeleaf, or just use React.

替代示例:我主要在以Java后端为后盾的React应用程序上工作.因此，我了解有人会偶然发现这种混合动力，并认为这可能是一个好主意.您可能已经在使用Thymeleaf，并试图弄清如何避免重写servlet，但仍然获得React的强大功能.

Sample Alternative: I primarily work on a React application backed by a Java backend. So I understand how someone could stumble upon this hybrid and think it might be a good idea. You are likely already using Thymeleaf and are trying to figure out how you can avoid rewriting your servlets but still get the power of React.

两年前，我们在类似的船上，只是JSP前端老化了，但是两者之间的差异可以忽略不计.我们所做的(并且效果很好)是使用JSP页面来引​​导整个React应用程序.现在，我们向用户呈现了一个 个JSP页面.该JSP页面将JSON输出到单个< script> 标记中，该标记包含一些初始启动数据，否则我们将不得不立即获取这些初始启动数据.其中包含资源，属性和纯数据.

We were in a similar boat two years ago, except with an aging JSP frontend, but the difference is negligible. What we did (and it works well) is use a JSP page to bootstrap the entire React application. There is now one JSP page that we render to the user. This JSP page outputs JSON into a single <script> tag that contains some initial startup data that we would otherwise have to fetch immediately. This contains resources, properties, and just plain data.

然后我们输出另一个< script> ，它指向包含整个独立React应用程序的已编译JS模块的位置.此应用程序启动时会加载一次JSON数据，然后其余部分进行后端调用.在某些地方，我们必须为此使用JSP，虽然它不理想，但仍然比您的解决方案更好.我们要做的是让JSP页面输出包含JSON的单个属性.通过这种方式(并通过XHR库进行了一些仔细的修剪)，我们得到了一个穷人的数据交换层，该层建立在我们没有时间进行更改的JSP框架之上.

We then output another <script> that points to the location of a compiled JS module containing the entire standalone React application. This application loads the JSON data once when it starts up and then makes backend calls for the rest. In some places, we have to use JSP for these, which is less than ideal but still better than your solution. What we do is have the JSP pages output a single attribute containing JSON. In this way (and with some careful pruning by our XHR library) we get a poor man's data interchange layer built atop a JSP framework we don't have time to change.

这绝对不是理想的，但是它运行良好，而且我们从React的许多优势中受益匪浅.当我们确实对这种特殊的实现有疑问时，很容易将它们隔离和解决.

It is definitely not ideal, but it works well and we have benefited vastly from the many advantages of React. When we do have issues with this peculiar implementation, they are easy to isolate and resolve.

这篇关于如何在reactJS中使用Thymeleaf th:text的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！