Reactはページの透かし効果の全プロセスを実現します

'react' から React をインポートします
'react-dom' から ReactDOM をインポートします。
'./index.css' をインポートします
'./components/WaterMarkContent' から WaterMarkContent をインポートします。
'./App' から App をインポートします

ReactDOM.render() は、
  <React.StrictMode>
    <ウォーターマークコンテンツ>
      <アプリ />
    </ウォーターマークコンテンツ>
  </React.StrictMode>,
  ドキュメント.getElementById('ルート')
）

  const { text = 'waterMark', fontSize = 16, fillOpacity = '0.2', fillColor = '#000' } = プロパティ
  定数res = `
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 幅="180px" 高さ="180px" ビューボックス="0 0 180 180">
        <text x="-100" y="-30" fill='${fillColor}' transform = "rotate(-35 220 -220)" fill-opacity='${fillOpacity}' font-size='${fontSize}'> ${text}</text>
      </svg>`

 const blob = 新しいBlob([res], {
    タイプ: 'image/svg+xml',
  })

 定数 url = URL.createObjectURL(blob)

    <div
      スタイル={{
        位置: '絶対'、
        幅: '100%'、
        高さ: '100%'、
        背景画像: `url(${url})`,
        上: 0,
        左: 0,
        zインデックス: 999,
        ポインタイベント: 'none'、//クリックスルー}}
    </div>

'react' から React をインポートします
'react' から { ReactNode, useMemo } をインポートします。

タイプ svgPropsType = {
  テキスト?: 文字列
  フォントサイズ?: 数値
  塗りつぶしの不透明度?: 数値
  塗りつぶし色?: 文字列
}
const SvgTextBg = (props: svgPropsType) => {
  const { text = 'waterMark', fontSize = 16, fillOpacity = '0.2', fillColor = '#000' } = プロパティ
  定数res = `
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 幅="180px" 高さ="180px" ビューボックス="0 0 180 180">
        <text x="-100" y="-30" fill='${fillColor}' transform = "rotate(-35 220 -220)" fill-opacity='${fillOpacity}' font-size='${fontSize}'> ${text}</text>
      </svg>`

  const blob = 新しいBlob([res], {
    タイプ: 'image/svg+xml',
  })

  定数 url = URL.createObjectURL(blob)

  戻る （
    <div
      スタイル={{
        位置: '絶対'、
        幅: '100%'、
        高さ: '100%'、
        背景画像: `url(${url})`,
        上: 0,
        左: 0,
        zインデックス: 999,
        ポインタイベント: 'none'、//クリックスルー}}
    </div>
  ）
}

タイプ propsType = {
  子供？: ReactNode
} & 部分的<svgPropsType>

const WaterMarkContent = (props: propsType) => {
  const { テキスト、フォントサイズ、塗りつぶし不透明度、塗りつぶし色 } = プロパティ

  定数memoInfo = useMemo(
    () => ({
      文章、
      フォントサイズ、
      塗りつぶしの不透明度、
      塗りつぶし色、
    }）、
    [テキスト、フォントサイズ、塗りつぶしの不透明度、塗りつぶしの色]
  ）
  戻る （
    <div style={{ position: 'relative', width: '100%', height: ' 100%' }}>
      {props.children}
      <SvgTextBg {...メモ情報} />
    </div>
  ）
}

デフォルトの WaterMarkContent をエクスポートする