标签：index const default componentName 导入 ChangeComponents 组件 动态

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。