AndyQsmart的专栏

AndyQsmart个人博客

React通过反射动态加载自定义组件

最近在写一个类似于页面编辑器的工具。

一般来说,可视化的编辑器,是通过拖拽已有组件,然后设置组件的属性,来完成一个编辑的过程。

然后在开发过程中遇到了一些问题,在此记录一下。

首先编辑器的开发在这就不多提了。

说重点,在开发中遇到了对于生成的自定义数据,然后需要通过数据来动态加载组件(因为某个编辑生成的页面,不一定包含所有自定义组件,在预览页面只需要加载用到的组件)然后对于每个不同的组件,需要修改其属性的话,需要去配置表中读取数据的类型,然后在编辑器页面中动态生成可修改数据项。

总结一下就是:

1、如何去按需动态加载未知组件(预先未知,只有需要到渲染的时候才知道)。

2、对于页面中已经渲染的组件,如何去获取其组件类中的一些类属性。

按需加载组件类

对于按需加载,js中有一个import函数(与import关键字不同),可以在运行过程中动态加载js脚本。网上查询用法:

import('./component/Example').then((Component) => {
    //do something with TheComponent = Component.default
})

获取到Comonpent.default类后(因为在export的时候用的是default),可以通过<TheComponent />生成对应的组件。

既然如此,自定义组件注册列表便可以这么写了:

const EnableComponent = {
    Component1: () => {
        return import('./component/Spacing')
    },
    Component2: () => {
        return import('./component/CoverBar')
    },
    Component3: () => {
        return import('./component/TextView')
    },
    Component4: () => {
        return import('./component/ImageView')
    },
    Component5: () => {
        return import('./component/VideoPlayer')
    },
    Component6: () => {
        return import('./component/RichTextEditor')
    },
}

这样在已知组件的全局key值后,便可以通过EnableComponent[key]().then(callBack)这样来按需加载组件了。

tip:对于动态加载得到的TheComponent可以在加载函数中设置TheComponent.componentKey = key这样来动态添加类属性。这样就无需在每一个类中去添加componentKey属性了。

动态获取组件类中属性

对于这个问题,首先需要区分一些东西TheComponent、<TheComponent />和ref。

TheComponent就是组件的类。

<TheComponent />这个东西具体是什么类型我没有去深究,但是从表象来看,它是TheComponent的某种类似于实例化的东西,传入的props会在渲染的时候用到。(如果说渲染后才是真正实例化的话,那么TheComponent就是类工厂,<TheComponent />就是生成的一种类,不仅让我想到了C++中指针的指针这种东西)

ref这个有两种定义方式<TheComponent ref='theRef' />和<TheComponent ref={(item)=>{ theRef=item }} />。前者通过this.refs.theRef这种形式去访问,后者通过自己存下来的theRef来访问。

然后说一下区别:

TheComponent的话,可以访问到一些类属性,当然自定义的可修改属性可以定义成类属性。

<TheComponent />如果把这个东西存下来的话,还是有用的。比如let item = (<TheComponent {...arg} />),那么item.props可以访问到自己传入的arg这个对象。item.type便可以得到TheComponent,这个反射的过程,便得到了TheComponent,于是便可以访问到TheComponent的静态属性了。

ref的话,可以通过theRef去调用真正的对象的方法(这些方法需要bind(this)后才能被外部调用)。

最终

问题差不多解决了,当然上述三个的深层次问题可能还需要后续去了解。

阅读更多
个人分类: React JavaScript
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭