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

【问题标题】：React Native Dynamically Inject Component at RuntimeReact Native 在运行时动态注入组件
【发布时间】：2016-10-09 06:10:56
【问题描述】：

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

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 />
    );
}

但是结果相同。有什么建议吗？

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

您需要导入/要求 EventModal。所以在这种情况下最好不要使用字符串并使用参考

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

【讨论】：

抱歉，我应该指定得更好。该模式基于外部 JSON 源/API 源，它以字符串形式出现。我导入了所有可能性，但在渲染之前不知道使用哪个。这是它的样子... render() { let Page = state.dataModal;返回（）； }
听起来很合理。您仍然需要要求/导入所有可能的模式类型。那是你在那个文件中所做的吗？ React 可以解析字符串和引用，但引用更“可缩小”（甚至本地应用程序也可以从中受益）。
我已经导入了所有三个以及我硬编码它们的内容，因为我通常会让应用程序正常运行

【解决方案2】：

发生这种情况是因为您添加了“模态”，它将变量转换为字符串，因此不是组件。此外，React Native 不会将任何变量视为组件，除非它的开头有一个大写字母。

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

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

render(){
    let Component = null;

    switch(this.state.currentModal){

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

    }

    return <Component/>;

【讨论】：