React JSX渲染HTML表格时如何实现行内数组元素独立可点击

核心原因是你当前直接渲染val.resources时，整个逗号拼接的内容是纯文本节点，自然无法给单个子项绑定独立事件，只要把字符串拆分为独立数组逐个渲染可点击元素即可，具体实现如下：

• 先将每行的resources字段按逗号分割为数组，使用JS原生的split(',')方法就能完成
• 不要把整行/整个单元格包裹在按钮中，给每个资源项单独包裹可点击元素，推荐用行内标签适配文本流，不会打乱原有逗号分隔的展示效果
• 渲染时判断当前项是否为最后一项，非最后一项在元素后补逗号分隔符，和原展示效果完全一致

完整实现代码 #

首先定义资源点击的处理函数，你可以在函数内根据点击的资源名分发对应逻辑：

// 记得在组件顶部引入Fragment，也可以用<>空标签代替
import { Fragment } from 'react';

const handleResourceClick = (resourceName) => {
  // 不同资源对应不同触发逻辑，按需修改即可
  if (resourceName === 'resource1') {
    console.log('执行resource1对应的操作');
  } else if (resourceName === 'resource2') {
    console.log('执行resource2对应的操作');
  } else if (resourceName === 'resource3') {
    console.log('执行resource3对应的操作');
  }
};

修改表格渲染逻辑，替换原来直接输出val.resources的部分：

<table>
  <tr>
    <th>ID</th>
    <th>Resources</th>
  </tr>
  {data.map((val, key) => {
    // 拆分逗号拼接的资源字符串为数组
    const resourceArr = val.resources.split(',');
    return (
      <tr key={key}>
        <td>{val.id}</td>
        <td>
          {resourceArr.map((resource, index) => (
            <Fragment key={index}>
              {/* 单个可点击资源项 */}
              <span
                onClick={() => handleResourceClick(resource)}
                style={{
                  color: '#1677ff',
                  cursor: 'pointer',
                }}
              >
                {resource}
              </span>
              {/* 非最后一项时补充逗号分隔 */}
              {index !== resourceArr.length - 1 ? ', ' : null}
            </Fragment>
          ))}
        </td>
      </tr>
    );
  })}
</table>

如果你偏好使用button标签实现点击，只要给单个资源外层的button加上样式重置即可，不会出现点击区域覆盖整行的问题：

<button
  onClick={() => handleResourceClick(resource)}
  style={{
    all: 'unset', // 清除button默认的边框、背景、内外边距等样式
    cursor: 'pointer',
    color: '#1677ff'
  }}
>
  {resource}
</button>

之前出现整行可点击的问题，本质是可点击标签包裹的范围设成了整行/整个单元格，只要保证每个可点击标签只包裹对应单个资源文本，点击范围就只会落在对应文字区域上。

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