React中如何在React-Table中提取对象数组属性的字符串值作为超链接地址

问题根源 #

cell.render('Cell') 是React-Table提供的渲染方法，返回值为React虚拟DOM对象而非原始的URL字符串，直接作为href属性值时会被自动转为[object Object]，就是你跳转地址异常的直接原因。你之前尝试的cell.render('Cell'.toString())写法完全不生效，因为你是对'Cell'这个字符串本身做了类型转换，没有改变render返回结果的类型。

推荐实现方法（在列配置中自定义渲染） #

React-Table支持在列定义中通过Cell属性自定义单元格渲染逻辑，这是最符合官方规范的写法，代码逻辑更易维护：

1. 修改你的columns配置，新增Cell自定义渲染项：

const columns = React.useMemo(
  ()=>[
    {
      Header:"Videos",
      accessor: "presignedURL",
      // value就是当前accessor对应行的presignedURL原始字符串值
      Cell: ({ value }) => <a href={value} target="_blank" rel="noreferrer">{value}<br /><img src={hospital}/></a>
    },
  ],
  []
)

2. 修改td内的渲染代码，直接调用render方法即可，不需要额外包a标签：

<td
  {...cell.getCellProps()}
  style={{
    padding: '10px',
    border: 'solid 1px gray',
    background: 'aliceblue',
  }}
>
  {cell.render('Cell')}
</td>

备用实现方法（直接取原始值） #

如果你不想修改列配置，也可以直接从cell实例上获取原始的URL值：

<a href={cell.value} target="_blank" rel="noreferrer">{cell.value}<br /><img src={hospital}/></a>

注：建议所有外站跳转链接都加rel="noreferrer"属性，避免安全风险

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