React-动态导入组件

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个页面，可根据用户输入呈现不同的组件。目前，我已经对每个组件的导入进行了硬编码，如下所示：

    import React, { Component } from 'react'
    import Component1 from './Component1'
    import Component2 from './Component2'
    import Component3 from './Component3'
    class Main extends Component {
        render() {
            var components = {
                'Component1': Component1,
                'Component2': Component2,
                'Component3': Component3
            };
            var type = 'Component1';  // just an example
            var MyComponent = Components[type];
            return <MyComponent />
        }
    }
    export default Main

但是，我一直都在更改/添加组件。有没有办法使文件仅存储组件的名称和路径，然后将它们动态导入另一个文件中？

回答：

我认为对于我想要实现的目标可能有些困惑。我设法解决了我遇到的问题，并在下面显示了我的代码，其中显示了我的解决方法。

单独的文件（ComponentIndex.js）：

    let Components = {};
    Components['Component1'] = require('./Component1').default;
    Components['Component2'] = require('./Component2').default;
    Components['Component3'] = require('./Component3').default;
    export default Components

主文件（Main.js）：

    import React, { Component } from 'react';
    import Components from './ComponentIndex';
    class Main extends Component {
        render () {
            var type = 'Component1'; // example variable - will change from user input
            const ComponentToRender = Components[type];
            return <ComponentToRender/>
        }
    }
    export default Main

这种方法使我可以非常快速地添加/删除组件，因为导入位于一个文件中，并且一次只需要更改一行即可。

以上是 React-动态导入组件 的全部内容， 来源链接： utcz.com/qa/428854.html

回到顶部