动态导入或要求React组件

Question

我正在尝试动态导入/需求组件，但是以某种方式，当我这样做时，React会抱怨。 require函数确实找到了它，但是React抛出一个错误，说它缺少某些功能't'等。所有这些都在电子应用程序中。

我有一个向导设置（正在运行，但我认为不是那么优雅），其中每个页面都有其自己的布局和jsx组件。 如果我想添加一个新页面，我不想管理x个文件，目前由于当前的设置，我不得不这样做。 在下面，您可以找到我想要实现的目标以及现在正在为实现该目标而正在做的事情 。 如果有任何建议，代码味道或更佳的选择，请告诉我，因为我是React和ES2015的新手（因为我来自C＃背景）。

我正在努力实现的目标

export default class WizardPageContainer extends Component {    
    // Constructor
    constructor(props) {
        super(props);        
    }

    // Render
    render() {
        const WizardPage = require(`./path/to/${this.props.step.id}`);

        return (
            <WizardPage step={this.props.step} />
        );
    }
}

我当前的操作方式 ：这意味着我必须首先在“ WizardPageContainer”组件的顶部声明导入/文件。这意味着额外的工作，容易出错/遗忘。 我应该补充一点，此代码现在可以正常工作，但是我认为这不是优雅/有未来性的证明 ：

/* PAGES */
import WizardPage_Welcome from './pages/0.wizard.welcome';
import WizardPage_SystemCheck from './pages/1.wizard.systemCheck';
import WizardPage_SignIn from './pages/2.wizard.signIn';
import WizardPage_ExamCode from './pages/3.wizard.examCode';
import WizardPage_TakeExamination from './pages/4.wizard.takeExamination';
import WizardPage_Close from './pages/5.wizard.close';
const pages = [    
    WizardPage_Welcome,
    WizardPage_SystemCheck,
    WizardPage_SignIn,
    WizardPage_ExamCode,
    WizardPage_TakeExamination,
    WizardPage_Close
];
/*/********************************************************************///

/* ******************************************************************** */
/* COMPONENT */
export default class WizardPageContainer extends Component {    
    // Constructor
    constructor(props) {
        super(props);        
    }

    // Render
    render() {
        const WizardPage = pages[`${this.props.step.id}`];

        return (
            <WizardPage step={this.props.step} />
        );
    }
}
/*/********************************************************************///

Answer 1

您的const pages需要是一个对象，而不是数组。

您可以在这里看到我制作的工作版本： https : //github.com/Frazer/meteor-react-nav/blob/master/lib/jsx/App.jsx

Answer 2

我认为这与“默认”有关。 我有这样的问题。 您可以检查此代码吗？ https://github.com/robeio/robe-react-admin/blob/master/src/app/HasAuthorization.jsx#L10

您也可以查看示例用法； https://github.com/robeio/robe-react-admin/blob/master/src/app/HasAuthorization.jsx#L26

Answer 3

最佳建议：使用Webpack处理您的导入，它比以往任何时候都高效。