在React中基于状态/属性渲染组件

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）之上添加一条评论，但不幸的是，我没有足够的声誉来做到这一点:)。 我认为编辑后的答案“行得通”，但仍然需要标题和课程之间的映射。 一种方法是将这些React类存储到可访问的对象中，例如

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

我认为这仍然有些破绽，而且我没有更好的答案。

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

Answer 2

您可以通过多种方式执行此操作。 基本上所有的内容只是if语句。 我可能会选择类似的方法并使用三元运算符，这通常是最常见的做法。

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

编辑：我想你想知道如何将组件设置为变量。 在这个例子中

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

如果我们假设this.state.title是一个组件（不是），那么您只需要大写currentState。

例如。

getInitialState(){
  return {
    proj1: Proj1 //Proj1 is a React Component.
  }
}
render(){
  var Proj1 = this.state.proj1; //you just need to capitalize the variable name.
  return <Proj1 />
}