使用反應重複列表

Question

我有以下列表，我想重複它的圖像編號和文件夾編號27時間 - 只想更改圖像編號並能夠設置文件夾編號。

<ul> 
     <li><input type="radio" checked="checked" /> <img src="assets/images/personal_images/folder1/0001.png" /></li> 
    <li><input type="radio" checked="checked" /> <img src="assets/images/personal_images/folder1/0002.png" /></li> 
    <li><input type="radio" checked="checked" /> <img src="assets/images/personal_images/folder1/0003.png" /></li> 
</ul> 

我有下面的代碼我打約與：

var RepeatModule = React.createClass({ 
     getDefaultProps: function() { 
     return { items: [] } 
     }, 
     render: function() { 

     var listItems = this.props.items.map(function(item) { 
      return (
      <li key="{item}"> 
       <input type="radio" checked="checked" /> 
       <img src="assets/images/personal_images/folder1/000' + {item} + '.png" /> 
      </li> 
     ); 
     }); 

     return (
      <ul> 
       {listItems} 
      </ul> 
     ); 
     } 
    }); 

Answer 1

這裏是我的凸輪了。它重複了27倍，並允許該文件夾作爲就像你希望的一個道具被傳遞英寸

var RepeatModule = React.createClass({ 
    getDefaultProps: function() { 
    return { 
     folder: 'folder1' 
    } 
    }, 
    render: function() { 

    // Build your 27 items here in to an array 
    // you can also pass in 27 items as props but a for loop is a great way to get exactly 27 things. 
    var items = []; 
    for (var i = 1; i <= 27; i++) { 
     items.push({ 
     image: 'assets/images/personal_images/' + this.props.folder + '/000' + i + '.png' 
     }) 
    } 

    return (
     <ul> 
     { 
     // map over the array here and display your list items 
     (items).map(function(item, key) { 
      return (
      <li key={key}> 
       <input type="radio" checked="checked" /> 
       <img src={item.image} /> 
      </li> 
     ) 
     }) 
     } 
     </ul> 
    ); 
    } 
}); 

你可以看到這方面的工作（與破碎的形象）位置：https://jsbin.com/koripebake/edit?html,js,output

Answer 2

雖然你可以做到這一點，你所提到的方式，它會更好，這分爲兩個部分。

var List = React.createClass({ 
    render: function() { 
    var list = []; 
    for (var i = 0; i < 27; i++) { 
    list.push(<ListItem key={i} />); 
    } 
    return (
     <ul> 
      {list} 
     </ul> 
    ); 
    } 
}); 

和

var ListItem = React.createClass({ 
    render: function() { 
    return (
     <li> 
      <input type="radio" checked="checked" /> 
      <img src={'assets/images/personal_images/folder1/000' + this.props.key + '.png'} /> 
     </li> 
    ); 
    } 
});