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

虽然可以按照您提到的方式进行操作，但最好将其拆分为两个组件。

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>
    );
  }
});

Answer 2

这就是我所提到的......它重复了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

使用react重复列表

2 个答案: