React javascript 檢查字符串是否包含特定單詞並將諸如鏈接反應路由器/樣式之類的內容添加到特定單詞

Question

是否有任何解決方案如何檢查字符串（例如：Google）並將 Link react 路由器添加到特定單詞（例如：Google）中？

像這張照片的例子

前

后

這是我非常簡單的代碼

import React, { Component } from "react";
import { Link } from "react-router-dom";

class App extends Component {
  state = {
    text: "Google is my Friend, Google is Search Engine, Thanks to google"
    website: "Google Friend"
  };

  render() {
    let text = null;
    if (this.state.text.includes(this.state.website)) {
      return (text = (
        <div>
          <Link to={"/example"}>Google </Link> then state text
        </div>
      ));
    }
    return <div>{text}</div>;
  }
}

export default App;

如果您能告訴我如何在特定單詞（例如：Google）中添加樣式，例如更改顏色，或添加粗體/斜體或任何內容，那將會更有幫助

謝謝

Answer 1

你可以這樣做：

{this.state.text.split(" ").map(text => {
   return text === "Google" ? <Link to="/google">Google</Link> : text;
})}