React组件如何自动解析有哪些属性?

发表时间：2022-06-10 11:19:09 阅读：63

最近在研究低代码技术,目前市面上的低代码项目在使用自定义组件库的时候, 大多数都是先按照一种约定来做定制一个组件库,然后这个组件库全部做完之后再引入低代码项目使用.

这样做我认为费时费力, 很麻烦,于是有一个想法, 如果能动态的随意导入组件库, 并且能动态的解析出每个组件都有哪些属性和方法, 那就不用那么麻烦了.

目前我探索出来了,是用SystemJs可以把React组件库打包,引入到项目中.但是如果想要动态解析每个组件有哪些属性的话, 要这个组件的构造函数添加了propTypes 属性才行. 最新的tsx 使用ts语法解析组件类型是否匹配, 以做代码提示用. 但编译后的Render方法不带propTypes属性, 无法动态获取组件有哪些属性.

不知道有没有人能给出宝贵的意见.

🎖️ 优质答案

想要加自省能力，向外暴露一个方法，类似但不限于

function foo(props,ref) {
    useImperativeHandle(ref, ()=>{
        getProps: () => {
            // 返回一个特殊的结构，能表达props就行
            return {}
        }
    })
    return <div>{props.name}</div>
}
export default forwardRef(foo)

已参与了 SegmentFault 思否社区 10 周年「问答」打卡，欢迎正在阅读的你也加入。