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

Question

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

Answer 1

我建议阅读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>;

<小时/>

较容易申请的是最新的，但安全性不如前者