如何使用命名导入动态加载不同的组件

Question

I need to use a different component depending on a propType, as a first attempt I'm using an object to store the components I need the problem is that It only works for the first key, for example it only works for AvatarList.Item, when I try to load Avatar.List it just doesn't load.

const component = {
  AvatarList: {
    Item: async () => (await import('../List/Avatar')).Avatar,
    List: async () => (await import('../List/Avatar')).List,
  },
  Simple: {
    List: async () => (await import('../List/Simple')).List,
    Item: async () => (await import('../List/Simple')).Simple,
  },
};

// Here there is the component and the default I componentType is "AvatarList"

class Articles extends Component {
  renderListItem() {
    const { componentType, newsArticles } = this.props;
    const Item = importComponent(component[componentType].Item);
    return newsArticles.map(({
      url,
      id,
      imageUrl,
      title,
      description,
    }) => (
      <Item
        id={id}
        url={url}
        imageUrl={imageUrl}
        title={title}
        description={description}
      />
    ));
  }

  renderList() {
    const { componentType } = this.props;
    const List = importComponent(component[componentType].List);
    return (
      <List>
        {this.renderListItem()}
      </List>
    );
  }

  render() {
    return (
      this.renderList()
    );
  }
}

// This is the HOC I use for the loading the components with async/await

import React, { Component } from 'preact-compat';

import Loader from '../components/Loader/Loader';

export default function importComponent(importFunction) {
  return class ComponentImporter extends Component {
    async componentWillMount() {
      this.setState({ component: await importFunction() });
    }

    render() {
      const ImportedComponent = this.state.component;

      return (
        <Loader loaded={Boolean(this.state.component)}>
          <ImportedComponent {...this.props} />
        </Loader>
      );
    }
  };
}

Answer 1

显然，如果它们是动态地来自同一文件，则无法获取命名的导出，因此解决方案是导入这些文件并在componentDidMount上获取变量。