如何在React中使用Sanitizer API？

Question

我需要在将 HTML 字符串发送到后端之前对其进行清理，并且我正在尝试使用 Mozilla 文档中提到的 Sanitizer API。所以我在我的 React 项目中创建了以下方法：

sanitizeText(unsanitized_string) {
    return new Sanitizer().sanitizeFor(
        "div",
        unsanitized_string,
    ).innerHTML;
}

但这有以下编译错误：

第 94:20 行：“消毒剂”未定义 no-undef

为什么我会收到此错误？

Answer 1

问题

在撰写本文时，HTML Sanitizer API 仍处于实验阶段。问题中的错误看起来像是一个 linting 错误 (

no-undef

)。我认为它来自 ESLint。 ESLint 从此package获取全局变量列表。查看包的全局变量的definition，没有出现 HTML Sanitizer API。它似乎也没有提供缺失类型的指南（请参阅TypeScript 的 DOM Lib Generator 存储库了解类似内容），因此不确定全局变量如何进入或是否存在 API 所需的支持基线。

解决方案

配置 ESLint

您可以让 ESLint 了解全局变量。有几种选择：

使用配置注释

在引用全局的文件顶部，您可以添加以下内容：

/* global Sanitizer */

演示

使用配置文件

在 ESLint 的配置文件中，您可以添加以下内容：

{
  "globals": {
    "Sanitizer": true
  }
}

请参阅文档了解更多详细信息。

为 globals 包做出贡献

您可以前往 globals 包 并打开一个问题来询问有关添加新全局变量的信息。包作者可能会详细说明贡献指南（例如支持基线）。如果他们愿意贡献，您可以自己添加定义。