在网站和应用程序中使用水印可以增加版权保护和安全性，同时提高用户体验。在这篇文章中，我们将分享如何使用React来创建一个水印组件，该组件支持图片和文字水印，并提供深度的学习和指导意义。
设计思路
首先，我们需要明确需求和设计目标。本文的水印组件需要支持以下两种类型的水印：
- 图片水印：将图片作为水印叠加在内容上。
- 文字水印：通过设置文本和样式，将文本作为水印叠加在内容上。
对于图片水印，我们需要将图片加载到组件中，并将其与内容一起渲染。对于文本水印，我们需要使用CSS样式设置文本属性并将其作为子元素添加到内容中。
因此，我们的组件结构应该如下：
<Watermark image={imageUrl}>
<Content />
</Watermark>其中，Watermark是水印组件，image是用于指定图片路径的prop，Content是包含要添加水印的内容的组件。
实现步骤
步骤一：创建组件
创建一个React组件，并接收image prop 和 children prop。children prop 包括需要添加水印的内容，可以是任何组件、元素或文本。
function Watermark(props) {
const { image, children } = props;
return (
<div className="watermark">
{children}
</div>
);
}步骤二：添加图片水印
对于图片水印，我们需要将图片加载到组件中，并使用CSS绝对定位使其叠加在内容上。
-- -------------------- ---- -------
-------- ---------------- -
----- - ------ -------- - - ------
------ -
---- ----------------------
----------
------ -- -
----
-----------
---------------
----------------------------
--
--
------
--
-这里使用了短路运算符来确认是否传递了image prop。如果没有传递image，则不会渲染图片水印。
我们还需要为.watermark__image类设置样式：
.watermark__image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0.5;
}这将使图片居中显示并降低其不透明度以创建一个透明的水印。
步骤三：添加文字水印
对于文本水印，我们需要创建一个带有文本和样式的元素，并将其作为子元素添加到内容中。
-- -------------------- ---- -------
-------- ---------------- -
----- - ------ -------- - - ------
------ -
---- ----------------------
----------
---- ----------------------------------------------
------ -- -
----
-----------
---------------
----------------------------
--
--
------
--
-这里我们创建了一个<div>元素，并设置其文本和样式。我们还需要为.watermark__text类设置样式：
-- -------------------- ---- ------- ---------------- - --------- --------- ------- ----- ------ ----- ---------- ----- ------ ----- -------- ---- ---------- --------------- -
这将使文本水印出现在内容的右下角，并倾斜45度以增加可读性。
步骤四：完整代码和使用示例
最终的组件代码如下所示：
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/5674) ，转载请注明来源 [https://www.javascriptcn.com/post/5674](https://www.javascriptcn.com/post/5674)