如何将JSF页面嵌入React组件？

当然可以把JSF页面里的表格嵌入到React组件里，而且对于你这种要快速搭建React演示版的需求来说，这确实是个能大幅节省时间的思路，完全具备可行性。我给你梳理几种实用的实现方式，你可以根据自己的场景选择：

• 直接用iframe嵌入（最适合演示快速落地）
  这是上手最快的方案，完全不需要改动原JSF页面的代码。你只需要在React组件中添加一个<iframe>标签，填入原JSF表格页面的访问地址，再调整一下样式让它和React页面融为一体即可。
  需要注意两个细节：如果原JSF应用和React演示版不在同一域名下，会触发跨域限制——演示场景下可以把两个服务部署在同一域名下，或者用本地代理工具（比如React的setupProxy）绕过；另外要调整iframe的宽高样式，避免出现多余的滚动条或留白。
  示例React组件代码：

import React from 'react';

const JsfTableEmbed = () => {
  return (
    <div style={{ width: '100%', height: 'calc(100vh - 120px)', border: 'none' }}>
      <iframe 
        src="http://your-old-jsf-app/table-page.jsf"
        style={{ width: '100%', height: '100%', border: '0', borderRadius: '4px' }}
        title="Embedded JSF Table"
      />
    </div>
  );
};

export default JsfTableEmbed;

• 提取JSF表格的静态资源到React重构
  如果原JSF表格只是做数据展示，逻辑不复杂，你可以直接把原页面中表格的HTML结构、CSS样式复制出来，在React组件里重构。如果有简单的交互（比如排序、筛选），也可以把对应的JS逻辑转换成React的写法。
  这种方式的优势是没有跨域问题，页面体验更统一，但如果原表格依赖JSF的后端交互、组件库或复杂业务逻辑，工作量会比较大，适合演示只需要静态展示的场景。

• 用Web Components封装JSF组件（适合复杂交互场景）
  如果原JSF表格有复杂的交互逻辑，你可以把它封装成Web Component自定义元素，然后在React组件中直接使用这个元素。不过这种方式需要你对Web Components有一定了解，且要确保原JSF代码能适配封装逻辑，复杂度相对较高，但复用性更好。

总结 #

对于你的演示版本开发，最推荐第一种iframe方案——能在最短时间内完成集成，几乎不需要额外开发，只要解决好跨域和样式适配问题就行。如果后续需要正式迁移到React，再考虑用第二种方式逐步重构。

内容的提问来源于stack exchange，提问作者Roberto