在運行時反應本機動態注入組件

Question

我需要在運行時使用react native動態注入組件。 我從API端點接收數據，然后我將其設置為狀態。 目前有三種可能性 - > EventModal，ArticleModal，NewsModal。 我導入了所有三個。 我正在嘗試做的一個簡化示例如下......

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

這類似於動態渲染React組件

但遺憾的是，由於我收到錯誤“預期組件類，得到EventModal”，似乎沒有工作（括號中的示例）。 同樣，我嘗試使用對象語法

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

然而同樣的結果。 有什么建議？

Answer 1

發生這種情況是因為您添加了“模態”，它將變量轉換為字符串，因此不是組件。 此外，React Native不會將任何變量視為Component，除非它在開頭有一個大寫。

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

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

render(){
    let Component = null;

    switch(this.state.currentModal){

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

    }

    return <Component/>;

Answer 2

您需要導入/需要EventModal。 所以在這種情況下最好不要使用字符串並使用引用

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