React Native在運行時動態注入組件

我需要在運行時動態注入一個組件，並使其具有反應本機。我接收來自API端點的數據，然後將其置於狀態。目前有三種可能性 - > EventModal，ArticleModal，NewsModal。我導入所有三個。下面我試圖做的是一個簡單的例子....React Native在運行時動態注入組件

render() { 
    let Page = { component: this.state.currentModal + "Modal" }; 
    return (
     <Page.component /> 
    ); 
}

，這類似Dynamically Rendering a React component

但遺憾的是似乎沒有工作（這兩個例子進出括號）因爲我收到錯誤「期望組件類，得到EventModal」。同樣，我嘗試用對象語法

render() { 
    let Page = this.state.currentModal + "Modal"; 
    return (
     <Page /> 
    ); 
}

但是同樣的結果。有什麼建議麼？

來源

2016-06-08 eric MC

您需要導入/需要EventModal。因此，在這種情況下，最好不要使用字符串，並使用參考

var EventModal = require('../components/EventModal'); 
render() { 
    let Page = EventModal; 
    return (
    <Page /> 
    ); 
}

來源

2016-06-08 19:57:38 Grgur

對不起，我應該已經確定的提高。該模式基於外部JSON源/ API源，它以字符串形式出現。我導入所有可能性，但不知道在渲染之前使用哪種可能性。繼承人看起來像什麼... render（）{ 讓頁面= state.dataModal; return（）; } –

聽起來很合理。你仍然需要/導入所有可能的模態類型。那是你在那個文件裏做的事嗎？ React可以解析字符串和引用，但引用更「小」（甚至本機應用程序也可以從中受益）。 – Grgur

我已經導入了所有這三個文件，並且我努力將它們編碼，因爲我通常會正常運行應用程序 –

這是因爲你要添加的「莫代爾」果然變量轉換成字符串所以不是一個組成部分。此外，React Native不會將任何變量視爲組件，除非它在開頭處具有大寫字母。

所以嘗試這樣的事情（你必須加入其他人也）：

import EventModal = require('./EventModal'); 

render(){ 
    let Component = null; 

    switch(this.state.currentModal){ 

     case: 'EventModal': 
     Component = EventModal; 
    break; 

    } 

    return <Component/>;

來源

2017-10-25 22:21:31 sfratini

React Native在運行時動態注入組件

回答

相關問題