如何在反应中链接标签

Posted 2023-05-09

【中文标题】如何在反应中链接标签

【英文标题】：How to linkify hashtag in react

【发布时间】：2019-11-28 16:28:47

【问题描述】：

我使用带有标签插件的 linkify-react 模块

import Linkify from 'linkifyjs/react';
import * as linkify from 'linkifyjs';
import hashtag from 'linkifyjs/plugins/hashtag';
hashtag(linkify);

我没有找到任何解决方案让主题标签链接直接在 jsx 组件中工作，有可能吗？

   <Linkify options=linkifyOptions >content</Linkify>

另外，我正在尝试使用该插件。 Whit插件我检索了内容中所有主题标签的数组

const pTag = linkify.find(p.content || '');

// here the output

  "type": "hashtag",
  "value": "#tag",
  "href": "#tag"

如何用文本中的链接替换所有主题标签？我已经尝试过这个解决方案，但不起作用

    pTag.forEach( (tag) => 
        content.replace(tag, 'example.com/'+tag);
    )

【参考方案1】：

您可以根据 Linkify 的文档使用 formatHref 属性将 URL 添加到每个主题标签 https://soapbox.github.io/linkifyjs/docs/options.html

var linkifyOptions = 
    
        formatHref: function (href, type) 
          if (type === 'hashtag') 
            href = 'https://twitter.com/hashtag/' + href.substring(1);
          
          return href;
        
      

var content = 'Linkify is #super #rad2015';
return <Linkify options=linkifyOptions>content</Linkify>;

在这里查看完整代码

https://codesandbox.io/s/linkify-sxt8c?fontsize=14

【讨论】：

嗨，谢谢你，我已经按照你的建议做了，这是我的实际导入和链接选项对象：` import * as linkify from 'linkifyjs';从 'linkifyjs/plugins/hashtag' 导入主题标签；标签（链接）； var linkifyOptions = 属性： rel: 'nofollow' , formatHref: function (href, type) if (type === 'hashtag') href = 'twitter.com/hashtag' + href.substring(1); 返回href； ; ` 但仍然无法正常工作，主题标签未链接

我已经修改了我的代码，选项 formatHref 正在按你说的那样工作，我的代码的另一部分有问题。谢谢！接受的答案