Question

我试图通过使用循环来迭代和调用我的组件来访问我的组件。我没有遇到语法错误，但是我没有从循环中获得所需的元素。这是我尝试的示例代码。

    render() {
    return (
      <div>
            {this.genThumbnail([{'src':'../../resources/images/p1.jpg', 'mode':'normal'},
            {'src':'../../resources/images/p2.jpg', 'mode':'normal'},
            {'src':'../../resources/images/p3.jpg', 'mode':'normal'},
            {'src':'../../resources/images/p4.jpg', 'mode':'landscape'},
            {'src':'../../resources/images/p5.jpg', 'mode':'portrait'},
            {'src':'../../resources/images/p6.jpg', 'mode':'landscape'}])}

          </div>
        </div>
)
}

genThumbnail(nails) {
    debugger;
    let src, mode;
    return(
      <div>
        {
          nails.forEach(function (data,index){
              return <ThumbNail imgsrc={data.src} mode={data.mode}/>
          }
        )
        }
      </div>

    )

  }

我不得不使用map（）辅助方法来实现这一点。任何人请澄清因forEach而产生的缺点。

Answer 1

Array.forEach不会返回任何内容。请改用Array.map，这将返回一个新数组

return(
      <div>
        {
          nails.map(function (data,index){
              return <ThumbNail imgsrc={data.src} mode={data.mode}/>
          }
        )}
      </div>
    )

Answer 2

问题在于forEach doesn't return anything。它意味着成为for循环的替身。即使您在回调中返回一个值，它也不会返回任何内容。 forEach（基本上）写得像这样：

Array.prototype.forEach = function(callback) {
  for (let i = 0; i < this.length; i++) {
    callback(this[i]); // Notice it doesn't use the return value
  }
};

map on the other hand使用回调函数的返回值返回一个新数组，以确定数组中每个项目的内容。

所以简短的回答是：forEach没有按设计返回任何内容。 map有效，因为确实再次按设计返回数组。

在JSX中使用for循环迭代和返回元素

2 个答案: