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

感谢您的帮助！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript linkify reactjs reactjs