请教下 react 前端如何封装页面组件

[ZGame]

1.要求就是让后端业务,不要触碰到 useEffect, useState,等基础 react 函数, 以及类似 vue 插槽那样,尽量保持 react.node 嵌套 保持在两三层内。
根据项目需求封装常见的列表页面,表单页面，和业务组件,尽量减少业务的前端心智负担。不需要 json 渲染组件。 这个有啥开源的参考吗 ,还是有啥好的思路

[songone]

以前做过的，提供一个思路：可以用 nodejs 做脚本，然后把常见的页面文件封装成模版，后端运行脚本，传入一些可以定义的参数，就生成对应的页面文件，这样后端只要按照页面上的示例去改就行了

[ZGame]

@songone 脚本估计暂时不考虑 就是可能还是用 react 去写 但是尽量只做业务上的修改

[langhuishan]

这不就是模版引擎吗？

[moooooooo]

组件只接受 RESTful 的 api 的话是不是就可以了

[DICK23]

说实话我没看懂需求，类似直接返回 jsx 模板代码？

[ZGame]

@DICK23 我觉得应该是类似 ant design pro 那种风格 ？ 尽量让业务少接触 react 原生的东西

[Charrlles]

参考 ant design pro 就好了，把请求都接管过来，数据再通过 children 传出去，比如`<Component request={getData}>{(data) => (<div>xxx</div>)}</Component>`，这样使用者甚至都不需要用到 useState 。然后一些需要通过交互来获取数据的组件，比如 Modal ，可以通过 forwardRef 暴露一个 open 方法，用来在点击的时候传入数据。还可以加上一些自定义 hook 来封装常用业务，使用者只管 useHook ，接触不到 useEffect ，useQuery 之类的库就是这么干的

[paopjian]

你这是要搞低代码么,我们项目是把 vue 组件写好后打包成 umd 格式, html 里直接引用 script, 组件就能直接用了, 剩下的就是传 props

[superedlimited]

页面最外层直接强制使用 rsc 。rsc 里无法使用 hooks ，需要交互的地方抽组件出来。