如何在渲染函數內使用if進行比較

我試圖通過從輸入獲得的狀態幫助加載組件二或三。我知道如何在渲染函數中使用三元運算符。是這樣的如何在渲染函數內使用if進行比較

render: function(){ 
return(<div> 
     {this.state.in===2?<Two/>: <Three/>} 
     </div> 
     )}

但這隻會工作兩個比較，如果我有十個組件，並希望在10種不同的選擇，加載10個不同的組件。如果我去了。這是我的嘗試。我無法保留內部條件{}就像我使用三元運算符一樣，如果我沒有將它們保存在{}中，則渲染會將其加載爲正常文本。這裏是我的代碼

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8" /> 
    <title>Hello React</title> 
    <script src="https://fb.me/react-0.13.3.js"></script> 
    <script src="https://fb.me/JSXTransformer-0.13.3.js"></script> 
    </head> 
    <body> 
    <div id="example"></div> 
    <script type="text/jsx"> 

    var One = React.createClass({ 

     getInitialState: function(){ 
     return {in:2} 
     }, 

     handler: function(eve){ 

     this.setState({ 
      in: eve.target.value 
     }) 
     }, 

     render: function(){ 
     return(
      <div> 
      <input value={this.state.in} onChange={this.handler} /> 
      if(this.state.in ===2){ 
       <Two/> 
      } 
      if(this.state.in ===3){ 
       <Three /> 
      } 

      </div> 
     ) 

     } 

    }); 


    var Two = React.createClass({ 

     render: function(){ 
     return(<div> 
      This is component 2 
      </div>) 

     } 

    }); 

    var Three = React.createClass({ 

     render: function(){ 
      return(<div>This is the third one</div>) 

     } 


    }) 


     React.render(<One/>,document.getElementById('example')); 

    </script> 
    </body> 
</html>

PS：更多的閱讀和官方的文檔，看看這個http://facebook.github.io/react/tips/if-else-in-JSX.html

來源

2015-07-21 gates

也許是這樣的：

render: function(){ 
     //Get all your component names and create an array 
     var components = ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten"]; 

     return(
      <div> 
       <input value={this.state.in} onChange={this.handler} /> 
       < components[this.state.in - 1] /> 
      </div> 
     ); 

     } 

});

來源

2015-07-21 10:51:07

修改組件陣列作爲作爲回報{組件[this.state.in]}，如果你給<>它呈現爲HTML，{}用於指定JSX。我接受了你的解決方案，因爲它很容易閱讀 – gates

我沒有React的經驗，這是一個更好的解決你的問題的JS想法。很高興你有更好的方式來展示它。 ;-) –

哈哈，沒有反應經驗的人似乎在搖擺它。雖然我正在全職工作* facepalm * – gates

陣營可以處理數組節點。因此，嘗試創建一個數組：

let children = []; 

if (cond1) children.push(elem1); 
if (cond2) children.push(elem2); 
if (cond3) children.push(elem3); 

return <div>{children}</div>;

來源

2015-07-21 10:51:44

其實這兩種解決方案都絕對精彩。謝謝 – gates

如何在渲染函數內使用if進行比較

回答

相關問題