基於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渲染組件？

回答

相關問題