动态导入或要求 React 组件答案

【问题标题】：import or require React components dynamically动态导入或要求 React 组件
【发布时间】：2017-04-19 14:36:57
【问题描述】：

我正在尝试动态导入/需要组件，但是当我这样做时，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} />
        );
    }
}
/*/********************************************************************///

【问题讨论】：

可能已经在stackoverflow.com/a/36678030/1155847 找到了解决方案。如果可行，我会尝试并报告或关闭问题。

标签： javascript node.js reactjs electron

【解决方案1】：

我认为这是关于“默认”的。我有这样的问题。你能检查一下这个代码吗？ 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

【讨论】：

所以如果我正确理解您的建议，应该使用“importComponent”或者使用“require”或“import”？
你这样用； importComponent(require("你的路径"))
谢谢，有了这个提示，我找到了一个解决方案，我将更详细地解释。
当您使用 module.export 时，它会将您的代码分配为 root。例如; module.export = {example:"hello"} 当您导入此代码时，您将获得相同的代码。但在 ES6 中，导出不是那样工作的。例如; export default {example:"hello"} 当您导入此代码时，您将获得相同的代码。但是如果你使用 require 而不是 import 你会得到这样的； { default : {example:"hello"} } 表示在 ES6 代码中被一些规则包装。
@YvesSchelpe 你也可以检查 webpack 配置例如：github.com/robeio/robe-react-ui

【解决方案2】：

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

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

【讨论】：

我也许应该补充一点，consty pages 代码现在对我来说可以正常工作。但我只是认为它不够优雅，因为我正在从 json 配置加载内存中的步骤，并且只想在运行时查找 jsx 页面。现在我基本上做了两次这些事情，使用 import 语句和 const pages 对象以及我拥有的 json 文件（不包含在演示代码中）。
所以您正试图找到一种方法来进行导入并使用 json 文件中的数据创建 const 页面？
是的，我来自 .Net / Java 背景，其中构建 UI / 向导或菜单的这些东西是微不足道的，带有配置文件或其他 - 例如由数据库查询等提供...也许这是被认为没有完成的事情，或者这里的做法不好？但是，是的，基本上我收到数据，比如在 json 中，其中包含特定部分的名称，然后我在文件系统中加载（或搜索），然后通过 require 加载并存储在 const 中。这也许就是计划 - 非常动态，即时。
我想知道是否有一个库可以做你所描述的，如果没有，这听起来像一个值得的项目。
我也想知道，到目前为止我还没有找到一个 - 因此我的问题是 - 但我会在接下来的几周内找到它，当我回到 #researchmode 时 :)

【解决方案3】：

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

【讨论】：