背景：在后台管理的项目中，会要求加上水印，防止截图盗取信息等，

1. 第一步：先创建水印的模块组件

// water-maker.tsx

import React ,{ memo, useMemo } from "react"
import styles from './index.less';
import { renderToString } from "react-dom/server";
const Index = (props: React.PropsWithChildren<{text:string ,fillColor?:string,fillOpacity?:number , fontSize?:number}>) => {

 const svgUrl= useMemo(() => {
   const svgRes =  (<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="300px" height="180px" viewBox="0 0 300 180">
     <text x="-160" y="-30" fill={props.fillColor ||'#333'} transform="rotate(-35 220 -220)" fill-opacity={props.fillOpacity  ||'0.1'}
       font-size={`${props.fontSize||'28'}px`}> {props.text}</text>
   </svg>)
   return URL.createObjectURL(new Blob([renderToString(svgRes)], {
     type:'image/svg+xml',
   }))
 }, [props]);
 
 return (<div className={styles.waterMaker}
   style={{ backgroundImage: `url(${svgUrl})` }}
 >
   {props.children}
 </div>)

}

export default memo(Index)

// index.less
.waterMaker{
 position: absolute;
 width: 100%;
 height: 100%;
 pointer-events: none;
 top: 0;
 left: 0;
 z-index: 999;
}

创建一个svg的标签，里面画上自己需要的水印内容，然后生成通过URL.createObjectURL生成一个url链接作为模块的背景;通过 pointer-events: none;这个属性可以将点击事件透传到下层。

2. 使用水印组件作用于项目的app.tsx上

  <React.StrictMode>
    <App />
    <WaterMaker text='水印哈哈哈'  />
  </React.StrictMode>

展示图片.png