{this.props.example [i]}でステートメント 'i'を渡す方法

Question

私の小道具の配列位置を宣言するための実際の値があるとき、それはうまくいきます。しかし、ステートメントが正しく表示されないため、ループメソッドを使用すると機能しません。

render: function() { 
for(var i = 0; i > 3; i++) { 
    var test = {this.props.example[i]} 
} 

結果は何も表示されません。これには別の方法がありますか？

Answer 1

あなたはJSXではrenderメソッドを書くことができます：私はその一例を想定しています

render : function() 
{ 
return 
<div> 
{ 
    for(var i = 0; i > 3; i++) { 
     var test = this.props.example[i] 
     console.log(test); 
    } 
} 
</div> 
} 

整数の配列です。

Answer 2

マップをマップして、レンダリング機能から要素を戻します。あなたは `render`関数から何かを返す必要があり

render() { 
    return (
     <div>{this.props.example.map(function(item, key){ 
      return <div key={key}>{item}</div> 
      })}</div> 
    ) 
    } 

class App extends React.Component { 
 
    constructor(){ 
 
    super(); 
 
    this.state = { 
 
     example : ["Hello", "Stack", "Overflow"] 
 
    } 
 
    } 
 
    render() { 
 
    return (
 
     <div>{this.state.example.map(function(item, key){ 
 
      return <div key={key}>{item}</div> 
 
      })}</div> 
 
    ) 
 
    } 
 
} 
 
ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script> 
 
<div id="app"></div>