动态导入或需要 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" 组件之上声明导入/文件。这意味着额外的工作并且容易发生 errors/forgetting 事情。 我应该补充一下，这段代码现在可以正常工作，但我认为这不是 elegant/future 证明:

/* 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

我觉得是关于"default"的。我有这样的问题。你能检查一下这段代码吗？ 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 处理您的导入，它比我们以往任何时候都更有效率。

动态导入或需要 React 组件

import or require React components dynamically

javascript

node.js

reactjs

electron