java - React 和 Freemarker 集成

Question

我们有一个基于Java、Spring Boot构建的网站，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 (请原谅糟糕的域概念)。本质上，您可以独立拥有这两个组件，也可以使用一个将两者结合在一起的组件，例如保险模块，代码如下所示:

PolicyDetails.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>
      )
   }

}

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