将带参数的函数传递给映射元素

Question

函数changeVideo是这样定义的，

  changeVideo(url) {
    alert(url)
  }

UI 正在尝试将其传递给多个映射图像。这是接收 changeVideo 并将其映射到所述图像的函数。 videos 是一个对象。 changeVideo 摄取的 url 是 videos 对象的属性。

function videoList(videos, changeVideo) {
  return Object.keys(videos).map((key) => {
    return (
      <div>
        <img
          onClick={() => this.changeVideo(videos[key].url)}
        />
      </div>
    );
  });
}

最后，我在这里调用 videosList 函数，并将 changeVideo 传递给它。

 <div className="videoList">
      {videoList(this.state.videos, this.changeVideo)}
</div>

在这个过程中的某个地方，我传递 changeVideo 不正确。感谢观看！

Answer 1

videoList 中的

this 不会有 changeVideo 属性，但由于您已经将其作为函数传递，因此直接使用 changeVideo：

this.changeVideo(videos[key].url 更改为 changeVideo(videos[key].url

将带参数的函数传递给映射元素

Passing a function with parameters to mapped elements

javascript

parameters

reactjs

map-function