javascript - 如何在 Javascript/ReactJs/React Native 中动态导入模块

Question

我想从路径动态导入模块 importPath 通过Props设置。

var importPath;

class MainComponent extends Component {
    state = {}
    render() {
        // Set var importPath = "path_to_module here;"
        // importPath = this.props.myModulePath
        return (
            <ComponentToImport myComponentPath="./ToastExample" />);
    }
}

export default MainComponent;

然后:

class ComponentToImport extends Component {
    ToastExample: (async () => {
        await import (this.props.revPath)
    })()

    async sayHiFromJava() {
        this.state.ToastExample.showJ('Awesome', ToastExample.SHORT);
    }

    render() {
        return (<ToastExample />);
    }
}

我该如何解决这个问题？

提前谢谢大家。

如何附加 ToastExample在import ToastExample from importPath;至await import("importPath");这样我就可以return(<ToastExample />);

更新

我已经尝试过:

class ComponentToImport extends Component {
    ToastExample: (async () => {
        await import (this.props.revPath)
    })()

    async sayHiFromJava() {
        this.state.ToastExample.showJ('Awesome', ToastExample.SHORT);
    }

    render() {
        return (<ToastExample />);
    }
}

但我收到错误:

error: bundling failed: index.js: index.js:Invalid call at line 28: import(_this.props.myComponentPath)

Answer 1

我想这就是方法:

import("importPath").then(() => {
    // your code
});

或

await import("importPath");

// your code

在这里查看更多https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import