如何在反应中链接主题标签

Question

我将 linkify-react 模块与 hashtag 插件一起使用

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

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

   <Linkify options={linkifyOptions} >{content}</Linkify>

或者我正在尝试使用该插件。使用插件我检索内容中所有主题标签的数组

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

// here the output
{
  "type": "hashtag",
  "value": "#tag",
  "href": "#tag"
}

如何将文本中的所有主题标签替换为 link？我试过这个解决方案但没有用

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

Answer 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

如何在反应中链接主题标签

How to linkify hashtag in react

linkify

reactjs