高阶组件之高亮关键词

1. 高阶组件之高亮关键词

// KeywordHoc 高阶函数 (组件)
import React from "react";

const inp = "红包 返现 首充 权益"
let content = "参与活动，即有可能获得红包。首充还有机会获得更多权益哦!来一个红包吗？更有机会返现哦！"


// 关键词高阶组件
const KeywordHoc = (ComponentView: any) => {

  const DisplayName = (ComponentName: any) => {
    return ComponentName.displayName || ComponentName.name || 'component'
  }

  const KeyRender: React.FC<{}> = () => {
    let sliceKey = inp.split(' ')
    for (let key in sliceKey) {

      // 正则方法为什么能与字符串方法配合使用？
      let regex = new RegExp(sliceKey[key], 'g')
      console.log('regex', regex);
      console.log(key);
      content = content.replace(regex, `<span class="light">${sliceKey[key]}</span>`)
    }
    
    KeyRender.displayName = `Hoc${DisplayName(ComponentView)}`
    let innerContent = <div dangerouslySetInnerHTML={{ __html: content }}></div>

    // 组件首字母必须大写
    return (
      <ComponentView content={innerContent} />
    )
  }
  return KeyRender
}

export default KeywordHoc

// KeywodView 作为参数的组件

import React from "react";
import './index.css'

interface KeywodViewProps {
  content: string
}
const KeywodView: React.FC<KeywodViewProps> = ({
  content
}) => {
  return (
    <div>
      <h1>KeywodView</h1>
      {content}
    </div>
  )
}
// 效果 红包 返现 首充 权益   全部红色高亮
export default KeywodView

// 父级组件 引入高阶组件和参数组件并组合调用
import React from "react";
import KeywordHoc from 'package/component/KeywordHoc'
import KeywodView from 'package/component/KeywodView'
const Keyword : React.FC<{}> = (props) => {
  // 调用高阶组件，似乎必须在高阶函数内部再定义一个组件，外层return 这个组件，并在这个组件内部，return被包装的组件？？
  const KeyTags = KeywordHoc(KeywodView)
  
  return (
    <div>
      <h1>keyword</h1>
      <KeyTags />
    </div>
  )
}

export default Keyword