ReactJS + LInk标签+事件传播

Question

以下是我的反应组件的一部分。我有DownloadIcon应该按预期执行但由于我点击DownloadIcon时链接标记它遵循路由地址。有没有办法阻止这种事件传播。

if (hasData) {
  const inner = (
    <div className={bodyClass}>
      <MetricValue
        shift={metric[valueType.key === 'dollar' ? 'shift' : 'numAccountsChangePct']}
        threshold={metric.shiftThreshold}
        value={getCurrentValueFormatted(metric)}
      />
      {
        metric.canSeeOverviewTiles && metric.sscSelectionFlag && metric.metricId !== 1 &&
        <span className={styles.icon} onClick={() => alert('propagation')}>
          <DownloadIcon click={(e) => {e.stopPropagation();fetchAccountFile(metric);}}/>
        </span>
      }
      <GoalHistory history={metric.goals} isDays={metric.metricId === 1}/>
    </div>
  );
  return linkBase && metric.goals ? (
    <Link to={`${linkBase}${metric.metricId}`} onClick={(e) => e.stopPropagation()}>
      {inner}
    </Link>
  ) : inner;
}

Answer 1

在这种情况下，您应该避免使用Link。请改用<a href={linkURL} download>。来源here