如何使用自定義組件解析主題標簽和字符串提及

Question

我有兩個叫Hashtag和Mention的React組件，它們基本上是指向Hashtag或用戶個人資料的鏈接。 我想解析一個字符串，將#hashtag替換為<Hashtag>hashtag</Hashtag> ，將@user替換為<Mention>user</Mention> 。 我懷疑也許我可以將字符串轉換為子字符串和組件的數組，然后映射並解析它，但是我認為它會變得很臟，我想必須對此有更好的解決方案。

Answer 1

我建議您在有類似問題的地方閱讀此主題 。

我會嘗試其中提到的兩種方法中的一些。 我將復制並粘貼它們。

使用危險地設置內部HTML

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>")
        }} />
    )
  }
}

在運行時解析JSX

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>;

---

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