javascript - React 中基于 state/prop 的渲染组件？

Question

我一直在学习 React，我想知道如何根据状态渲染类/组件？

我在想也许可以写这样的东西:

var currentState = this.state.title;
< currentState />

但这似乎不起作用。

我可以使用 if 语句或 case/switch 来做到这一点，但这似乎不是特别灵活。

这是我目前正在处理的内容:

var Proj1 = React.createClass({
    render: function(){
        return (
            <h1>Number one</h1>
        )   
    }
});

var Proj2 = React.createClass({
    render: function(){
        return (
            <h1>Number two</h1>
        )   
    }
});

var ContentContainer = React.createClass({
    getInitialState: function(){
        return {
            title: 'Proj1'
        }
    },
    render: function(){
        return (
            ///// Proj1?
        )
    }
});

React.render(
    <ContentContainer/>, document.getElementById('container')
 );

本质上，我想根据状态的当前名称呈现适当的类。例如，如果 state.title = Proj1，我想渲染 Proj1，或者如果 state.title = Proj2，我想渲染 Proj2。

请并感谢

Answer 1

我想在 Tyler McGinnis 之上添加评论，但不幸的是我没有足够的声誉来做到这一点:)。我认为编辑后的答案“有效”，但我们仍然需要标题和类(class)之间的映射。一种方法是将这些 React 类存储到可访问的对象中，例如

Components = {};
Components.Proj1 = React.createClass({...}};
Components.Proj2 = React.createClass({...}};
...
ContentContainer = React.createClass({
    return (
        var Proj = Components[this.state.title];
        <Proj/>
});

我认为这仍然有点hack-ish，而且我没有更好的答案。

我认为大多数时候，React组件状态用于控制某些html/css属性，您的用例更像是使用对象工厂来创建/获取不同类型的对象，其中使用if语句似乎并不适用太糟糕了。