如何将文件上传下载的EJS代码适配React？需做哪些改动？

一、改动量取决于原EJS的内容复杂度 #

• 如果原home.ejs只是基础的上传表单+文件列表展示（比如只有简单的HTML结构，用EJS做变量渲染和循环），改动不算大：
  • 把EJS的模板语法换成React JSX：比如<%= fileName %>改成{fileName}，<% files.forEach(file => { %>换成{files.map(file => (...))}
  • 把服务端直接传入的变量，改成前端通过API请求从Node后端获取（比如用fetch在useEffect里拉取文件列表）
• 如果原EJS混了大量服务端逻辑（比如直接在模板里处理MongoDB查询、服务端条件判断），改动会大很多：需要把这些服务端逻辑全部移到Node后端做成API接口，前端只负责调用接口拿数据、渲染页面

二、是否需要额外脚本或DOM操作？ #

• 上传功能：不用额外引入脚本。React里用原生的<input type="file" />，通过useState获取选中的文件，再用FormData配合fetch/axios把文件传给后端接口，全程用React的状态管理，不需要直接操作DOM
• 下载功能：也不用额外脚本。可以通过动态创建a标签的方式触发下载（比如在点击事件里创建<a>并设置href为后端下载接口，然后模拟点击），或者直接用window.open(下载接口URL)，同样不需要复杂的DOM操作
• 例外情况：如果原EJS用了jQuery这类依赖DOM操作的脚本，必须完全替换成React的hooks/状态逻辑，不能混用——React的虚拟DOM和手动DOM操作会冲突，这种情况要删掉旧脚本，用React的方式重写交互逻辑

内容的提问来源于stack exchange，提问作者pia punya Munirah