如何在react中链接hashtag

Question

我使用带有hashtag插件的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>

在另一种情况下，我尝试使用插件。点击插件，我检索内容中所有hashtag的数组

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

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

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

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

Answer 1

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

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