React中使用正则表达式为某节点中的关键字加粗显示

 节点为：

<div className="content" ref={content}>
    {item.article}
</div>

处理使用useCallback ：

  const keywords = ['Surfing', 'Swimming', '男性', '女性'].join('|');
  const content = useCallback(node => {
    let reg = eval('/' + keywords + '|[0-9]*/gi');
    let strings = node.innerText.replace(reg, `<span class='number'>$&</span>`);
    node.innerHTML = strings;
  }, []);

开始用useRef发现髌骨能成功的修改inner HTML，看了官方文档后发现：

---

当 ref 对象内容发生变化时，useRef 并不会通知你。变更 .current 属性不会引发组件重新渲染。如果想要在 React 绑定或解绑 DOM 节点的 ref 时运行某些代码，则需要使用