npm 包 react-protected-mailto 使用教程-JavaScript中文网-JavaScript教程资源分享门户

什么是 react-protected-mailto

react-protected-mailto 是一个用于在 React 应用中保护邮件地址的 npm 包。它能够自动将邮件地址转换为 JavaScript 函数，并使用 JavaScript 加密算法将其加密，从而避免邮件地址被垃圾邮件拦截器捕获。

安装 react-protected-mailto

您可以通过 npm 来安装 react-protected-mailto：

npm install react-protected-mailto --save

或者使用 yarn：

yarn add react-protected-mailto

如何使用 react-protected-mailto

在您的 React 应用中，您可以这样使用 react-protected-mailto：

import ReactProtectedMailto from 'react-protected-mailto';

const MyComponent = () => (
  <div>
    You can contact us at <ReactProtectedMailto email="contact@example.com" />
  </div>
);

ReactProtectedMailto 组件会自动加密邮件地址，同时用 a 标签包裹起来，从而渲染出的 HTML 如下所示：

<div>
  You can contact us at <a href="javascript:void(0)" onclick="function() { /** 加密后的代码 **/ }()">example.com</a>
</div>

react-protected-mailto 的配置参数

ReactProtectedMailto 组件支持如下配置参数：

email: 必选，您的邮件地址。
text: 可选，邮件地址的展示文本。如果未设置，则会使用邮件地址作为展示文本。
javascriptProtect: 可选，表示是否使用 JavaScript 加密器来保护您的邮件地址。默认为 true。

react-protected-mailto 的高级用法

ReactProtectedMailto 还支持一些高级用法，比如：

使用自定义链接文本

在您的 React 应用中，您可以这样使用 react-protected-mailto：

<ReactProtectedMailto email="contact@example.com" text="点击这里联系我们" />

使用默认链接文本

在您的 React 应用中，您可以这样使用 react-protected-mailto：

<ReactProtectedMailto email="contact@example.com" />

ReactProtectedMailto 组件会自动生成一个默认的链接文本，如下所示：

<a href="javascript:void(0)" onclick="function() { /** 加密后的代码 **/ }()">contact@example.com</a>

使用无 JS fallback

在某些情况下，您可能希望为未启用 JavaScript 的浏览器提供一个备用链接。在您的 React 应用中，您可以这样使用 react-protected-mailto：

<ReactProtectedMailto email="contact@example.com" fallbackUrl="mailto:contact@example.com" />

ReactProtectedMailto 组件会为您生成两个链接：一个加密的 JavaScript 链接，一个备用的普通链接。如果浏览器启用了 JavaScript，那么点击加密链接会自动打开邮件应用程序；否则，浏览器会打开备用链接。

结语

react-protected-mailto 是一款非常实用的 npm 包，可以让您在 React 应用中轻松保护邮件地址，防止其被垃圾邮件拦截器拦截。希望这篇文章能够帮助您更好地了解 react-protected-mailto 的使用，从而为您的开发工作带来便利。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005607b81e8991b448deaca