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

导入或动态需要React组件

2 个答案: