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

我一直在学习React，我在想如何能够基于状态呈现类/组件？基于React中的state/prop渲染组件？

我在想或许将是这样的：

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。

请和谢谢

来源

2015-10-18 slickrick

有多种方式可以做到这一点。所有基本上只是如果声明。我可能会这样做，并使用三元运算符，这通常是最常见的做法。

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

来源

2015-10-18 03:02:53

Yeaahh，我知道if语句可以做到这一点，但我的意思是让我们说例如我有Proj20，但谢谢你的回应！ – slickrick

@slickrick编辑我的答案。我想这就是你要找的东西？ –

谢谢，嗯，似乎也没有工作，我想我会坚持如果语句然后 – slickrick

我想添加一个评论泰勒麦金尼斯顶部，但不幸的是我没有足够的声望来做到这一点:)。我认为编辑的答案'有效'，但我们仍然需要标题和班级之间的地图。做的一种方式是存储它们反应的类可访问的对象，像

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

我觉得还是有点劈十岁上下，我没有更好的答案。

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

来源

2015-10-18 08:06:31

嗯是啊我想这样的事情，我猜'this.state.title'或如果我要发送作为一个支持子元素this.props.currentstate的属性，当它在一个变量中时，this.state.title不喜欢导出。例如，如果我写'var Proj10 = Proj1;返回'它确实渲染Proj1，但是如果我写'var Proj = this.state.title;返回'它不渲染Proj1 – slickrick

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

回答

相关问题