Reactjs 渲染存储在列表中的react组件

解释我的问题有点困难，但我会尽力解释我正在尝试做什么，什么不起作用

我希望基于父组件中的道具值渲染特定组件。该特定组件存储在我可以访问的列表中

这是组件列表：

let React = require('react');

//List of all components
let Component1 = require("./Component1");
let Component2 = require("./folder2/Component2");
let Component3 = require("./folder2/Component3");


let ListOfComponents = {
    "id1" : {"handler":Component1},
    "id2" : {"handler":Component2},
    "id3" : {"handler":Component3},
};

module.exports = ListOfComponents;

let React = require('react');
let ListOfComponents = require('./ListOfComponents');

let ParentComponent = React.createClass({

    render() {
        let component = ListOfComponents[{this.props.compID}].handler;
        return ( component )
    }
});

module.exports = ParentComponent;

这是要渲染不同组件的父组件：

let React = require('react');

//List of all components
let Component1 = require("./Component1");
let Component2 = require("./folder2/Component2");
let Component3 = require("./folder2/Component3");


let ListOfComponents = {
    "id1" : {"handler":Component1},
    "id2" : {"handler":Component2},
    "id3" : {"handler":Component3},
};

module.exports = ListOfComponents;

let React = require('react');
let ListOfComponents = require('./ListOfComponents');

let ParentComponent = React.createClass({

    render() {
        let component = ListOfComponents[{this.props.compID}].handler;
        return ( component )
    }
});

module.exports = ParentComponent;

当我尝试运行此操作时，会收到错误消息：

不变冲突：ParentComponent.render（）必须返回有效的组件。您可能返回了未定义、数组或其他无效对象。

---

这是可以实现的，还是我需要一种不同的方法来根据我的组件列表呈现正确的组件？

给定一个具有此结构的对象：

let ListOfComponents = {
    "id1" : {"handler":Component1},
    "id2" : {"handler":Component2},
    "id3" : {"handler":Component3},
};

要在另一个组件的渲染方法中动态渲染其中一个组件，请执行以下操作：

render() {
    const Component = ListOfComponents[this.props.compID].handler;
    return <Component />
}

render（）{
const Component=ListOfComponents[this.props.compID].handler；
返回
}

下面是一个可运行的示例：

import React from "react"

const Component1 = () => <p>Hello</p>
const Component2 = () => <p>Goodbye</p>

const components = {
  id1: Component1,
  id2: Component2,
}

class App extends React.Component {
  render() {
    const id = "id2"
    const Component = components[id]
    return <Component />
  }
}

export default App

从“React”导入React
常量组件1=（）=>您好

常量组件2=（）=>再见

常数分量={
id1：组件1，
id2：组件2，
}
类应用程序扩展了React.Component{
render（）{
const id=“id2”
常量组件=组件[id]
返回
}
}
导出默认应用程序

给定具有此结构的对象：

let ListOfComponents = {
    "id1" : {"handler":Component1},
    "id2" : {"handler":Component2},
    "id3" : {"handler":Component3},
};

要在另一个组件的渲染方法中动态渲染其中一个组件，请执行以下操作：

render() {
    const Component = ListOfComponents[this.props.compID].handler;
    return <Component />
}

render（）{
const Component=ListOfComponents[this.props.compID].handler；
返回
}

下面是一个可运行的示例：

import React from "react"

const Component1 = () => <p>Hello</p>
const Component2 = () => <p>Goodbye</p>

const components = {
  id1: Component1,
  id2: Component2,
}

class App extends React.Component {
  render() {
    const id = "id2"
    const Component = components[id]
    return <Component />
  }
}

export default App

从“React”导入React
常量组件1=（）=>您好

常量组件2=（）=>再见

常数分量={
id1：组件1，
id2：组件2，
}
类应用程序扩展了React.Component{
render（）{
const id=“id2”
常量组件=组件[id]
返回
}
}
导出默认应用程序

您尝试过返回吗？您尝试过David Suggestion吗？我之前尝试过，但没有注意到控制台中的错误消失了，我只检查了显示相同结果的视图，因此我认为是相同的错误：因此正确的解决方案与您编写的

返回

相同，但第一个字母必须是大写，不知道为什么，否则它不会呈现正确的组件。不知道是否与其他组件存在冲突可能是如果从

let component=…

中删除

{}

，即

let component=ListOfComponents[this.props.compID].handler

，会发生什么？据我所知，这应该会返回一个正确的React组件。@VatanBytyqi您是对的，JSX对于组件的xml标记是区分大小写的

component

小写将呈现

HTML标记，但

component

应呈现该组件。您是否尝试了

返回

？您是否尝试过David Suggestion我之前尝试过，但没有注意到控制台中的错误消失，我只检查了显示相同结果的视图，因此我假设它是相同的错误：S因此正确的解决方案与您编写的

return

相同，但第一个字母必须是大写，不知道为什么，否则它不会呈现正确的组件。不知道是否与其他组件存在冲突可能是如果从

let component=…

中删除

{}

，即

let component=ListOfComponents[this.props.compID].handler

，会发生什么？据我所知，这应该会返回一个正确的React组件。@VatanBytyqi您是对的，JSX对于组件的xml标记是区分大小写的<小写的code>component将呈现

HTML标记，但

component

应呈现该组件。