React 和 Freemarker 集成

Question

我们有一个基于 Java、Spring 引导的网站，UI 是用 FTL (FreeMarker) 编写的。

现在我们想使用 React 重写 UI，但又不想放弃整个 FTL 而只使用 React 从头开始。因为我们团队只负责那个网页的一个组件，而且那个页面是用FTL写的。

假设在网页上，有一个名为

的组件

insurance-module

渲染保险模块，由 FreeMarker 编写，并包含在此代码中：

#### Other FTL code ########

<#include "/XXX/insurance/insurance-module.ftl" /> 

#### Other FTL code ########

我可以使用 React 编写该组件，但问题是，我不知道如何将我的 React 代码集成到现有的 FTL 模板中。意思是，在不破坏原始代码结构和功能的情况下，插入我完整的功能性 React 代码。

#### Other FTL code ########

This part now comes from React.

#### Other FTL code ########

谢谢

Answer 1

使用 React，您基本上可以构建组件、组合甚至在任何可能的地方重用它们，您甚至不需要 FreeMarker，但是，如果您确实需要使用 FreeMarker，您可以查看文档 here .例如，假设您的保险模块有 policy-details 和 insured-asset（请原谅糟糕的领域概念）。您基本上可以独立地拥有这两个组件和一个将两者结合在一起的组件，例如 insurance-module 并且代码如下所示：

政策详情。js/InsuredAsset.js

import React, { Component } from 'react'
...

export class PolicyDetails extends Component {
   //constructor and maybe other functions
   render() {
     return (
       <div>
          some html here...
       </div>
      )
   }

}

对于复合组件，您可以使用类似的东西：

InsuranceComponent.js

import React, { Component } from 'react'
...

export class InsuranceComponent extends Component {
   //constructor and maybe other functions
   render() {
     return (
       <div>
          <PolicyDetails />
          <InsuredAsset />
       </div>
      )
   }

}

我希望这能回答您的问题，因为它过于宽泛，无法给出具体的答案

React 和 Freemarker 集成

React and Freemarker integration

java

spring

freemarker

reactjs

spring-boot