Javascript react-在其他组件的渲染函数中渲染动态组件

我正在尝试使用react开发一个web应用程序，但我遇到了一个问题。 我的组件得到一个“exists component name”，我尝试在当前组件的渲染函数中渲染这个新组件

我的当前组件渲染函数

render(){

    let Xxx = null;
    if( this.props.onHex ){
      console.log( this.props.onHex );
      Xxx = <this.props.onHex />
    }

    return(
        <div className="myClass">
            <div className="anotherClass">
               {Xxx}
            </div>
        </div>
    );
  }
}

render（）{
设Xxx=null；
如果（this.props.onHex）{
console.log（this.props.onHex）；
Xxx=
}
返回(
{Xxx}
);
}
}

它对我不起作用，控制台日志返回新组件“Unit”的名称。当我用这个

Xxx=

替换

Xxx=

时，它工作并渲染单元的渲染功能

看起来react无法将

识别为组件。 我做错了什么，请告诉我

我的单位代码：

    export default class Unit extends Component{

    render(){
        return(
            <div>test</div>
        );
    }
}

导出默认类单元扩展组件{
render（）{
返回(
测试
);
}
}

更新： 当我使用

const XxxName=Unit时；Xxx=它对我有用，但我希望能够从字符串（我从json获得这个字符串）呈现组件。
我想在这种情况下，我可以在一个文件中创建所有可能的组件，将它们加载到数组或其他东西中，并通过字符串获取它们，但这不是可以使用的东西。我有很多组件，也许如果我想知道如何从单独的文件夹（每个组件的单独文件）加载它们，这将是解决方案的一半。但我仍然在寻找如何从字符串加载组件

jsFiddle处理另一个类似的问题

更新2：
我并没有找到一种优雅的方式来达到我的目标（我不确定它是否存在），现在我正在为每个动态组件使用方法，希望有人能给我提供更优雅的解决方案。检查它：

newExampleComponent（）{
返回；
}
新成员（类型）{
返回此[“新”+类型+“组件”]（）；
}

我创建它是为了测试是不是
this.props.onHex
一个字符串或某种引用？你不能传递“component name”
并期望它选择你在其他地方拥有的组件构造函数。您需要像这样传递一个对单元组件的引用。
@Chris这是一个字符串。@YuryTarabanko为什么它对我来说听起来不那么糟糕，
和
之间有什么不同，这个注释实际上让我想到了使用类似
const Xxx=window[this.props.onHex]（）
因为当我使用
const Xxx=Unit时有效。“和之间的区别”在这种情况下没有区别。但是如果您执行
操作，它将被删除为
React.createElement（'unit'，null）
而不是
React.createElement（unit，null）
。“给了我一个使用const Xxx=window[this.props.onHex]（）”这样的想法，这是个坏主意，因为您的组件正在污染全局范围。很有可能引入由名称冲突引起的细微错误。直接使用
this.props.onHex
不起作用。这可能不起作用，因为OP似乎将jsx视为某种html扩展，并传递“组件名称”而不是对组件的引用。@FiriceNguyen，啊，对了。你应该在回答中指出这一点，因为就目前的情况来看，它并没有真正说明它解决了什么问题。@Chris：是的，你是对的。最好有一些解释。我添加了更多细节：）它对我不起作用，我尝试了
const XxxName=this.props.onHex；Xxx=不工作，我尝试了
Xxx=
相同。。它创建但不作为组件
newExampleComponent() {
    return <ExampleComponent />;
}

newComponent(type) {
    return this["new" + type + "Component"]();
}

let Xxx = null;
if( this.props.onHex ){
  const XxxName = this.props.onHex;
  Xxx = <XxxName />;
}

const xxx = this.props.onHex || "";
const XxxComp = eval(xxx);
...
return (<XxxComp />);