将应用程序从 AngularJS 转换为 React-Typescript 微前端的最佳方法

Question

我们拥有单体 AngularJS 应用程序，现在我们将迁移到 ReactJS 微前端应用程序。在 AngularJS 应用程序中，我们总共有 64 个 html 页面。基于包含 LayoutId 的 API 响应，我们为每个请求渲染 1 个 HTML 页面（页面是动态的）。下面是代码片段。

var layouts = { 
101: {
template: require('./layout-101.html'),
searchOptions: [
  {
    code: 'defaultSearch',
    value: 'Default Search'
  },
  {
    code: 'LastNameSearch',
    value: 'Last Name Search'
  }     
]
},
102: {
template: require('./layout-102.html'),
searchOptions: [
  {
    code: 'defaultSearch',
    value: 'Default Search'
  },
  {
    code: 'outOfStateSearch',
    value: 'Out of State Search'
  }
 ]   
}
......
......
......
}

在控制器中

 function showLayout(layoutId) {
 showForm.searchOptions = LayoutsService.getSearchOptionsForLayout(layoutId);  
 showForm.currentLayout = LayoutsService.getLayoutKey(layoutId);
 showForm.layout = _.cloneDeep(LayoutsService.getScopeDataForLayout(layoutId));
}

function getLayout(layoutId) {
return layouts[layoutId] || layouts.unknown;
}

在Service中，LayoutsService调用API的方法很少

 function getLayout(layoutId) {
 return layouts[layoutId] || layouts.unknown;
 }
 .....
 .....
 .....

现在我需要将这些页面转换为 ReactJS，我如何用最少的代码实现这一目标。我的意思是基于 layoutId 我需要重新渲染 64 页中的 1 页。最好的方法是什么？任何建议都会有所帮助

Answer 1

我知道您的 64 个 html 页面略有不同，并且基于略有不同的数据，但由相同的 AngularJS 控制器编排。

不幸的是，使用 React 你无法重现这个逻辑。但是，您可以使用代码和值属性创建 64 个组件：

export function Layout101({searchOptions}) {
    return (
      <div>your HTML layout</div>
    );
};

然后您可以像这样创建

layouts

变量：

const layouts = {
    101: (
      <Layout101 searchOptions={[
        {
          code: 'defaultSearch',
          value: 'Default Search'
        },
        {
          code: 'LastNameSearch',
          value: 'Last Name Search'
        }     
      ]}
      />
    ),
    102: (
      <Layout102 searchOptions={[
        {
          code: 'outOfStateSearch',
          value: 'Out of State Search'
        },
        {
          code: 'defaultSearch',
          value: 'Default Search'
        }     
      ]}
      />
    ),
};

然后渲染正确的布局，如下所示：

export function ShowLayout({layoutId}) {
    const layouts = { see code above ... };
    return <>{ layouts[layoutId] }</> || <LayoutUnknown />;
}