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

它对我不起作用，控制台日志返回新组件“Unit”的名称。当我用这个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 Dynamic Component Name

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 official docs

您不能使用通用表达式作为 React 元素类型。如果你 确实想使用通用表达式来指示 元素，只需先将其分配给大写变量。这往往 当您想要基于 a 渲染不同的组件时出现 道具：

所以你需要先将this.props.onHex 分配给一个CAPITALIZED 变量，然后你应该能够使用它。

---

再次更新

您似乎想传递一个字符串，而不是对组件的引用。有一种肮脏的方法可以做到这一点

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

我创建了这个codepen 用于测试