javascript在 meteor 中生成重复的图像

Question

任何人都可以帮助我尝试制作一张根据有多少部分重复的图像。我收到 Uncaught TypeError:无法设置未定义的属性“src”。

我正在使用 meteor 和 react

genPrtnImg: function () {
 var pNum = FoodItemsC.find(this.props.foodItem.portionNo);
 for (i = 0; i < pNum; i++)
  var img = document.createElement('img');
  img.src = "http://downloadicons.net/sites/default/files/carrot-icon-14142.png";
return img;
},

该函数在下面的渲染中被调用:

render() {
    return (
      <tbody>
        <tr>
          <td rowSpan="3"><img className="itemSmlPic" src="http://bed56888308e93972c04-0dfc23b7b97881dee012a129d9518bae.r34.cf1.rackcdn.com/sites/default/files/veggie-heart.jpg"></img></td>
          <td><h1>{this.props.foodItem.foodName}</h1></td>
          <td rowSpan="3"><img className="itemSmlPic" src="http://thesocialmediamonthly.com/wp-content/uploads/2015/08/photo.png"></img></td>
        </tr>
        <tr>
          <td>{this.props.foodItem.foodDesc}</td>
        </tr>
        <tr>
          <td>{this.genPrtnImg()}</td>
        </tr>
      </tbody>
    );
  }

谢谢!

Answer 1

您没有将整个 for 循环括在大括号内，因此您的 for 循环实际上仅迭代此行 var img = document.createElement('img');。因此，您的 var 是在 for 循环内声明的，也就是说，当您点击下一行并执行 img.src = 时，您的 var 不存在于该行代码之外，您会收到错误，因为img 实际上并不存在于此处。修复方法是用括号括起来

for (i = 0; i < pNum; i++) {
  var img = document.createElement('img');
  img.src = "http://downloadicons.net/sites/default/files/carrot-icon-14142.png";
}

B)这仍然不起作用，因为当您返回 img 时，您也返回了 for 循环的范围之外，因此 img 不存在。您可以将其移动到 for 循环内，但这意味着它只会执行一次循环，并且一旦到达返回线，它将返回一个单一的 img 值

编辑:

解决这个问题的方法可能是将这些值推送到一个数组并返回它(包装在一个元素中，这样 react 就不会被删除):

genPrtnImg: function () {
  var pNum = FoodItemsC.find(this.props.foodItem.portionNo);
  var i=0;
  var x = [];
  for (i = 0; i < pNum; i++){
    x.push(<img src='http://downloadicons.net/sites/default/files/carrot-icon-14142.png' />);
  }
  return <div>{x}</div>;
}