Импортировать или потребовать динамически реагировать на компоненты

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

Я думаю, речь идет о «по умолчанию». У меня такая проблема. Вы можете проверить этот код; 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 2

Ваших const pages потребности быть объектом, а не массив.

Вы можете увидеть рабочую версию я сделал это здесь: https://github.com/Frazer/meteor-react-nav/blob/master/lib/jsx/App.jsx

Answer 3

Лучший совет: используйте Webpack для обработки вашего импорта, это намного эффективнее, чем когда-либо.