React javascript检查字符串是否包含特定单词并将链接反应路由器/样式之类的内容添加到特定单词

Question

有没有解决方案如何检查字符串（例如：Google）并将链接反应路由器添加到特定单词（例如：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;
})}