React 高亮显示关键词

highColor = () => {
   // 文本内容
    let newContents = '妙味课堂是一支独具特色的IT妙味培训团队，妙味努力的帮助远程学习的朋友培训实现技术提升独具'

    //关键词
    const hights = ['妙味', '特色', '培训', '努力', '独具']
    const result = []
    for (let i = 0; i < hights.length; i++) {
      const hight = hights[i]
      const index = newContents.indexOf(hight)
      if (index !== -1) {
        result.push(<span>{newContents.slice(0, index)}</span>)
        result.push(<span className={(hight)}>{hight}</span>)
        newContents = newContents.substring(index + hight.length)
      }
    }
    if (newContents) {
      result.push(<span>{newContents}</span>)
    }
    result.map((m, n) => {
      /*eslint-disable*/
      if (!m.props.hasOwnProperty('className')) {
        let str =  m.props.children
        const res = []
        for (let i = 0; i < hights.length; i++) {
          const hight = hights[i]
          const index = str.indexOf(hight)
          if (index !== -1) {
            res.push(<span>{str.slice(0, index)}</span>)
            res.push(<span className="hight">{hight}</span>)
            str = str.substring(index + hight.length)
          }
        }
        if (str) {
          res.push(<span>{str}</span>)
        }

        result.splice(n,1, res)
      }
    })
    return result
  }