如何解决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>
)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。