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在运行时动态注入组件

回答

相关问题