代码之家  ›  专栏  ›  技术社区  ›  JackTheKnife

基于传递的属性导入组件

  •  0
  • JackTheKnife  · 技术社区  · 5 年前

    有没有一种方法可以根据作为道具从父组件传递的内容导入组件,比如

    <ComponentA
       componentToLoad = '/path/to/componentB'
    />
    

    然后在 ComponentA

    @import localComponent from {props.componentToLoad};
    
    0 回复  |  直到 5 年前
        1
  •  0
  •   JackTheKnife    5 年前

    我没能找到完美的解决方案,但下面提到的解决方法对我来说已经足够好了,可以实现我想要的。

    我已经创建了公共表标题索引文件,其中包含表标题的所有位置:

    表格标题.jsx

    let tablelHeaders = {};
    
    tableHeaders['propA'] = require('../tableA/tableAheaders.jsx').default;
    tableHeaders['propB'] = require('../tableB/tableBheaders.jsx').default;
    tableHeaders['propC'] = require('../tableB/tableCheaders.jsx').default;
    ...
    tableHeaders['propX'] = require('../tableX/tableXheaders.jsx').default;
    
    export default tableHeaders
    

    然后在主构件的视图中,为其指定prop:

    <MyTable tableHeaders="propA" />
    

    而在 MyTable 组件访问它作为 require 而不是 import

    import tableHeaders from "tableHeaders.jsx;
    
    ....
    
    
    const tableColumns = tablelHeaders[props.tableHeaders];
    
    

    希望它能帮助别人或者别人会想出更好的解决办法。