其他分享
首页 > 其他分享> > React如何动态导入组件,封装一个组件,动态导入自己定义的组件!

React如何动态导入组件,封装一个组件,动态导入自己定义的组件!

作者:互联网

1.目录结构

 

 2.index.js主要内容

 

 

import React from 'react';
import PropTypes from 'prop-types';
const prefixCls = 'change-components';
const ChangeComponents = (props) => {
    const { componentName } = props;
    const dynamicLoadComponent = (component) => {
        return require(`../components/${component}/index`).default;
    };
    const DynamicDetail = dynamicLoadComponent(componentName);
    return (
        <div className={prefixCls}>
            <DynamicDetail />
        </div>
    );
};
ChangeComponents.propTypes = {
    componentName: PropTypes.string.isRequired
};
export default ChangeComponents;

#特殊说明:

require(`../components/${component}/index`).default;
这句话可能有些人的node版本不一样,不需要加.default;
componentName :在引用组件的时候必须传这个参数!

标签:index,const,default,componentName,导入,ChangeComponents,组件,动态
来源: https://www.cnblogs.com/shangguancn/p/16317298.html