Question

任何人都可以帮助我尝试根据有多少部分重复拍摄图像。我得到了Uncaught TypeError：无法设置属性＆＃39; src＆＃39;未定义的。

我正在使用流星并做出反应

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 =时你不会出现这一行代码，因为img没有＆＃39 ; t实际存在于此。修复是用括号括起来

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值

编辑：

对此的修复可能是将这些值推送到数组并返回该数据（包含在元素中，以便反应不会消除）：

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

javascript在流星中生成重复的图像

1 个答案: