javascript - 如何将 JSX 组件与 dangerouslySetInnerHTML 结合

Question

我正在显示存储在数据库中的文本。数据来自 firebase 作为字符串(包括换行符)。为了使其显示为 HTML，我最初执行了以下操作:

<p className="term-definition"
        dangerouslySetInnerHTML={{__html: (definition.definition) ? definition.definition.replace(/(?:\r\n|\r|\n)/g, '<br />') : ''}}></p>

效果很好。但是，还有一项附加功能。用户可以输入 [word]这个词将被链接起来。为了实现这一点，我创建了以下函数:

  parseDefinitionText(text){
    text = text.replace(/(?:\r\n|\r|\n)/g, '<br />');
    text = text.replace(/\[([A-Za-z0-9'\-\s]+)\]/, function(match, word){
      // Convert it to a permalink
      return (<Link to={'/terms/' + this.permalink(word) + '/1'}>{word}</Link>);
    }.bind(this));
    return text;
  },

我遗漏了 this.permalink方法，因为它不相关。如您所见，我正在尝试返回 <Link>从 react-router 导入的组件。但是由于它是原始 HTML，dangerouslySetInnerHTML不再正常工作。

所以我有点卡在这一点上了。我该怎么做才能既格式化内部文本又创建链接？

Answer 1

您可以将文本拆分为一个链接数组 + 字符串，如下所示:

import {Link} from 'react-router';

const paragraphWithLinks = ({markdown}) => {
  const linkRegex = /\[([\w\s-']+)\]/g;

  const children = _.chain(
    markdown.split(linkRegex) // get the text between links
  ).zip(
    markdown.match(linkRegex).map( // get the links
      word => <Link to={`/terms/${permalink(word)}/1`}>{word}</Link> // and convert them
    )
  ).flatten().thru( // merge them
    v => v.slice(0, -1) // remove the last element (undefined b/c arrays are different sizes)
  ).value();

  return <p className='term-definition'>{children}</p>;
};

这种方法的最佳之处在于无需使用 dangerouslySetInnerHTML。使用它通常是一个非常糟糕的主意，因为您可能会创建 XSS 漏洞。例如，这可能使黑客能够从您的用户那里窃取登录凭据。

在大多数情况下，您不需要使用dangerouslySetHTML。一个明显的异常(exception)是与第 3 方库的集成，仍应仔细考虑。