如何为Contentful富文本中的外部超链接添加target="_blank"属性

要给Contentful富文本里的外部链接添加target="_blank"属性，同时带上安全必备的rel="noopener noreferrer"，可以通过自定义富文本渲染器的INLINE节点处理函数实现，以下是验证可行的代码：

[INLINES.HYPERLINK]: (node, children) => {
  if (node.data.uri.includes('https://')) {
    return (
      <a target="_blank" rel="noopener noreferrer" href={node.data.uri}>
        {children}
      </a>
    )
  }

  return <Link to={node.data.uri}>{children}</Link>
},

代码说明： #

• 针对Contentful富文本的INLINES.HYPERLINK类型节点做自定义渲染
• 通过判断链接URI是否包含https://来区分外部链接与内部链接
• 外部链接渲染为标准<a>标签，带上target="_blank"实现新窗口打开，同时添加rel="noopener noreferrer"避免安全风险
• 内部链接则使用项目中的路由组件（示例为<Link>）进行页面跳转

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