react中解决dangerouslySetInnerHTML

因为react中采用dangerouslySetInnerHTML会存在安全问题，公司规定禁止使用dangerouslySetInnerHTML,所以就自己手写一个组件来替代，之前总结写在语雀，老是忘记归档，这里记录一下

dangerouslySetInnerHTML 是 React 为浏览器 DOM 提供 innerHTML 的替换方案。通常来讲，使用代码直接设置 HTML 存在风险，因为很容易无意中使用户暴露于跨站脚本（XSS）的攻击

// useHTML.js
import React, {useRef, useEffect} from 'react';
export default props => {
const content = useRef();
useEffect(() => {
  content.current.innerHTML = props.children;
  
}, []);

return <span ref={content}></span>
}

import  useHTML from '@/components/useHTML'
<useHTML>这里是一大段文字，放置你想用dangerouslySetInnerHTML的承接innerHTML的内容</useHTML>