Question

我需要在运行时使用react native动态注入组件。我从API端点接收数据，然后我将其设置为状态。目前有三种可能性 - ＆gt; EventModal，ArticleModal，NewsModal。我导入了所有三个。我正在尝试做的一个简化示例如下......

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

这类似于How to Host and Run a Basic Windows Communication Foundation Service

但遗憾的是，由于我收到错误“预期组件类，得到EventModal”，因此似乎没有工作（括号内和括号内的示例）。同样，我尝试使用对象语法

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

然而同样的结果。有什么建议吗？

Answer 1

这是因为您要添加＆＃39;模态＆＃39;它将变量转换为字符串，因此不是组件。此外，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 />
   );
 }

在运行时反应本机动态注入组件

2 个答案: