React-渲染动态组件内部渲染功能其他组件的功能

Question

我正在尝试使用React开发Web应用程序，并且有问题。我的组件获得一个"存在组件名称"，我尝试在当前组件的渲染函数中渲染这个新组件。

我当前的组件渲染函数

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

它对我不起作用，控制台日志返回新组件"单元"的名称。当我用此Xxx = <Unit />替换Xxx = <this.props.onHex />时，它起作用并渲染单元的渲染功能。

看来React无法识别<Unit/>作为组件。我做错了什么，请告知

我的单位代码：

    export default class Unit extends Component{
    render(){
        return(
            <div>test</div>
        );
    }
}

更新：当我使用const XxxName = Unit; Xxx = <XxxName />;时，它对我有用，但我希望能够从字符串中渲染组件（我从JSON获得了此字符串）。我想我可以在文件中创建所有可能的组件，然后将它们加载到数组或其他内容中，并通过字符串获取它们，但这不是可以与之相处的东西，如果我会从中加载它们，我可能会有很多组件单独的文件夹（每个组件的单个文件）将是一半解决方案。但是我仍在寻找如何从字符串中加载组件。

jsfiddle与另一个类似问题http://jsfiddle.net/dhjxu5ol/

更新2：我还没有找到达到目标的优雅方法（我不确定是否存在），目前我正在为每个动态组件使用方法，希望有人会以更优雅的解决方案为我提供建议。检查它：react/jsx动态组件名称

newExampleComponent() {
    return <ExampleComponent />;
}
newComponent(type) {
    return this["new" + type + "Component"]();
}

Answer 1

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

检查此jsfiddle，例如

---

更新：

根据React官方文档

您不能将常规表达式用作React元素类型。如果你 确实要使用一般表达式指示 元素，首先将其分配给大写变量。这经常 当您想根据一个 道具：

因此，您需要先先将this.props.onHex分配给大写的变量，然后您应该能够使用它。

---

再次更新

似乎您想传递字符串，而不是对组件的引用。有一种肮脏的方法

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

我创建了这个用于测试的编码