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

Posted 2023-05-09

【中文标题】React：检测并包装自定义元素中的链接

【英文标题】：React: Detect and wrap links in custom element

【发布时间】：2021-05-16 17:10:34

【问题描述】：

对此的任何帮助将不胜感激。我有带有链接的文本块，并且一直在使用 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>
  )

感谢您的帮助！

【参考方案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>
    )

【讨论】：

您也可以将选项formatHref 传递给返回null 的函数。所以你在包装上没有href