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

Question

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

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>
  )
}

感谢您的帮助！

Answer 1

使用 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>
    )
}

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

React: Detect and wrap links in custom element

javascript

linkify

reactjs