React：检测并包装自定义元素中的链接

问题描述

对此的任何帮助将不胜感激。我有带有链接的文本块，并且一直在使用 linkifyjs 的 React 组件来自动用锚标记包装链接。但是，现在我想在每个链接旁边显示一个带有一些自定义行为的按钮。有没有办法在自定义组件中包装链接，像这样说？

function CustomLink(props) {
  return (
    <>
      <a href={props.link}>{props.text}</>
      <button>Click me</button>
    </>
  )
}

我知道我可以在选项对象中传递类似 tagName: 'strong' 的东西，但它不允许我传递自定义的 React 元素。如果我尝试执行这样的操作（适用于内置标签，例如 'strong'），我会收到一条错误消息：

// error => Element type is invalid: expected a string (for built-in components) or a
// class/function (for composite components) but got: object.

function CustomLink(link) {
  console.log(link)
  return (
    <a href={link}>{link}</a>
  )
}

function TextWithLinks(props) {
  return (
    <Linkify className="d-inline" options={{tagName: CustomLink}}>
      {props.text}
    </Linkify>
  )
}

感谢您的帮助！

解决方法

使用 format 选项并向其传递一个函数。

function CustomLink({link}) {
    return (
        <>
            <a href={link}>{link}</a>
            <button>Click Me</button>
        </>
    )
}

function TextWithLinks(props) {

    function formatter(value,type) {
        return <CustomLink link={value}/>
    }

    return (
        <Linkify className="d-inline" options={{tagName: 'div',format: formatter }}>
            {props.text}
        </Linkify>
    )
}