React-Context实现水印功能

import React, { useContext, useState, useEffect } from 'react';
import Watermark from '@/components/Watermark'; // 假设Watermark是水印组件
import { GlobalContext } from '@/context/GlobalContext'; // 假设GlobalContext是上下文
 
export default () => {
  const {
    setting: {
      watermark: {
        visible,
        content,
        fontSize,
        fontColor,
        angle,
      },
    },
  } = useContext(GlobalContext);
 
  const [watermarkProps, setWatermarkProps] = useState({
    visible,
    content,
    fontSize,
    fontColor,
    angle,
  });
 
  // 监听全局设置中的水印属性变化
  useEffect(() => {
    setWatermarkProps({
      visible: setting.watermark.visible,
      content: setting.watermark.content,
      fontSize: setting.watermark.fontSize,
      fontColor: setting.watermark.fontColor,
      angle: setting.watermark.angle,
    });
  }, [setting.watermark]);
 
  return (
    <Watermark {...watermarkProps} />
  );
};

这段代码使用React的useContext钩子从GlobalContext上下文中获取水印的配置信息，并通过useState钩子管理水印组件的属性状态。useEffect钩子用于监听设置中水印属性的变化，并更新水印组件的状态。这样，当全局设置中的水印配置发生变化时，水印组件会自动更新其显示的属性。