導入或要求React組件動態

我試圖動態地導入/需要組件，但不知何故，當我做它React抱怨。 require函數找到它，但React拋出一個錯誤，說它缺少一些函數't'等。所有這些都在電子應用程序中。導入或要求React組件動態

我有一個嚮導設置（這是工作，但不是很優雅，我認爲），其中每個頁面都有它自己的佈局和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} /> 
     ); 
    } 
} 
/*/********************************************************************///

來源

2016-12-05 Yves Schelpe

可能在http://stackoverflow.com/a/36678030/1155847找到了解決方案。我會試試這個報告，或者報告問題，如果這個問題有效的話。 –

我認爲這是對「默認」。我有這樣的問題。你能檢查這個代碼嗎？ 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

來源

2016-12-05 08:58:27 Hasan

因此，如果我正確理解了您的建議，那麼使用「importComponent」應該替代技巧，還是使用「require」或「import」？ –

你這樣使用; importComponent（require（「your path」）） – Hasan

謝謝，用這個提示我找到了一個解決方案，我會更詳細地解釋。 –

你const pages需要是一個對象，而不是一個數組。

你可以看到我做的這一個在這裏工作版本： https://github.com/Frazer/meteor-react-nav/blob/master/lib/jsx/App.jsx

來源

2016-12-05 08:54:51

我也許應該補充說，consty網頁代碼現在對我來說工作正常。但是我只是覺得它不夠優雅，因爲我正在從json配置中加載內存中的步驟，只是想在運行時查找jsx頁面。現在我基本上做了兩次這些事情，包括import語句和const頁面對象以及我擁有的json文件（未包含在演示代碼中）。 –

所以你試圖找到一種方法來執行導入並使用json文件中的數據創建常量頁面？ –

是的，我來自.Net/Java背景，這些東西在構建用戶界面/嚮導或菜單時很簡單，只有配置文件或其他 - 例如由數據庫查詢等提供......也許這是一種被認爲沒有完成的事情，或在這裏的不好的做法？但是，是的，基本上我接收數據，在json中說，它包含特定部分的名稱，然後我在文件系統中加載（或搜索），然後通過require加載並存儲在const中。這也許是這個計劃 - 真正動態的，即時的。 –

-4

最佳建議：使用Webpack處理您的導入，它的效率比我們所能達到的要高。

來源

2016-12-05 10:58:28 Dan

導入或要求React組件動態

回答

相關問題