React中点击元素按内容类型执行函数或打开新标签页问题

你的问题出在onClick属性绑定了React元素而非函数，导致非图片类型的点击没有触发任何操作。以下是修正方案：

核心问题分析 #

原代码中，当contentType不是图片时，你给onClick赋值了<a href={item.url}></a>——这是一个React元素，而onClick需要的是一个可执行的函数，所以点击时自然无反应。

修正后的代码 #

example.map((item, index) => {
  const handleClick = () => {
    if (item.contentType === 'image/jpeg') {
      openSlider();
    } else {
      // 打开新标签页，添加安全参数避免安全风险
      window.open(item.url, '_blank', 'noopener,noreferrer');
    }
  };

  return (
    <Grid container lg={12} onClick={handleClick} key={index}>
      {/* 这里渲染item对应的内容（图片、文本预览等） */}
    </Grid>
  );
})

关键说明 #

1. 统一绑定点击函数：通过handleClick函数集中处理不同类型的点击逻辑，确保onClick始终绑定可执行的函数。
2. 用window.open打开新标签页：无需使用<a>标签，直接通过API打开URL，同时添加noopener,noreferrer参数提升安全性，避免新页面获取原页面的控制权。
3. 修正map参数：原代码的item.index是语法错误，改为(item, index)获取当前项和索引，同时添加key属性符合React列表渲染规范。

内容的提问来源于stack exchange，提问作者Josh Winters