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

75 阅读 0 评论 50 点赞

我是靠谱客的博主忧伤猎豹，最近开发中收集的这篇文章主要介绍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去调用真正的对象的方法。