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之上添加评论但不幸的是我没有足够的声誉来做到这一点:)。我认为编辑过的答案已经奏效了＃39;但我们仍然需要标题和班级之间的地图。一种方法是将这些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语句并不是＆＃39;似乎很糟糕。

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 />
}

在React中基于状态/道具渲染组件？

2 个答案: