React Native 在运行时动态注入组件

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 不会将任何变量视为组件，除非它开头是大写的。

所以尝试这样的事情（你还必须添加其他的）：

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

render(){
    let Component = null;

    switch(this.state.currentModal){

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

    }

    return <Component/>;