javascript - 如何使用自定义组件解析主题标签和字符串提及

我有两个叫Hashtag和Mention的React组件，它们基本上是指向Hashtag或用户个人资料的链接。我想以将#hashtag替换为的方式解析字符串
<Hashtag>hashtag</Hashtag>
和@user与
<Mention>user</Mention>
。我怀疑也许我可以将字符串转换为子字符串和组件的数组，然后映射并解析它，但是我认为它会变得很脏，我想必须对此有更好的解决方案。

最佳答案

我建议您阅读this thread where there is a similar question。

我会尝试其中提到的两种方法中的一些。我将复制并粘贴它们。

Using dangerouslySetInnerHTML

const escapeRE = new RegExp(/([.*+?^=!:$(){}|[\]\/\\])/g)
const safeRE = (string) => {
  return string.replace(escapeRE, "\\$1")
}

class Hightlight extends Component {
  static propTypes = {
    match : PropTypes.string,
    string : PropTypes.string,
  }

  render() {
    return (
      <span
        dangerouslySetInnerHTML={{
          __html : string.replace(safeRE(this.props.match), "<strong className\"match\">$1</strong>")
        }} />
    )
  }
}

Parsings JSX at runtime

var parts = "I am a cow; cows say moo. MOOOOO.".split(/(\bmoo+\b)/gi);
for (var i = 1; i < parts.length; i += 2) {
  parts[i] = <span className="match" key={i}>{parts[i]}</span>;
}
return <div>{parts}</div>;

最容易应用的是最新的，但不如前者安全