将被点击元素的道具作为参数传递给函数 - React / D3答案

【问题标题】：pass prop from clicked element into function as an parameter - React / D3将被点击元素的道具作为参数传递给函数 - React / D3
【发布时间】：2019-03-16 20:55:48
【问题描述】：

我正在 React 应用程序中渲染 d3 地图。鉴于以下情况：

<path onClick={evt => this.mapClicks(evt, d)} mapData={this.getMapData(d)} />;

将mapData 传递给mapClicks 函数的正确React 方法是什么？

【问题讨论】：

mapCicks(evt, this.getMapData(d))?
@VelimirTchatchevsky 我最初是这样做的，但是 mapData 函数有点贵，宁愿在初始渲染时这样做
它应该运行一次还是每个路径分别运行

标签： javascript reactjs d3.js

【解决方案1】：

我建议使用处理程序创建者：

getPathClickHandler(data) {
  return (e) => {
    // use data here
  };
}
...
<path onClick={this.getPathClickHandler(d)} />;

【讨论】：

【解决方案2】：

getPathClickHandler(d) {
    const mapData = this.getMapData(d);
    return (e) => {
       // event, d, mapData can be used here
    };
}


<path onClick={this.handleClickForPath(d)} />;

但是 this.getMapData 仍然会在每次反应渲染时被调用，取决于上下文，是否可以在渲染之外预先计算它

【讨论】：