如何在 React 中抑制“标签 <some-tag> 在此浏览器中无法识别”警告？答案

【问题标题】：How can I suppress "The tag <some-tag> is unrecognized in this browser" warning in React?如何在 React 中抑制“标签 <some-tag> 在此浏览器中无法识别”警告？
【发布时间】：2022-03-29 21:01:11
【问题描述】：

我在 React 中使用了带有自定义标签名称的元素，并遇到了这些错误。关于这个主题有一个 GitHub 问题 (https://github.com/hyperfuse/react-anime/issues/33)，其中有人说：

这是 React 16 中的新警告消息。与anime/react-anime 无关，可以放心地忽略此警告。

很高兴可以安全地忽略它，但是当我的代码向控制台填充无用的错误消息时，它仍然无法通过审查。

如何抑制这些警告？

【问题讨论】：

你想摆脱发展中的污染吗？因为这些警告不应出现在生产版本中
这是一个相当大的警告墙。一个用于页面上的每种类型的元素。我想摆脱开发中的污染。
到目前为止，我发现的最简单的解决方案是在每个可能的标签前加上“x-”。关于 html 中的 x-tags 有一些鲜为人知的古老规则，它说任何以“x-”开头的东西都可以使用。
你在组件中渲染了哪些标签

标签： reactjs warnings

【解决方案1】：

我找到了解决此问题的潜在方法 - 如果您正在使用插件（并且可能在其他情况下），您可以使用 is 属性。

在使用 X3d 时发现 here - 只需编写 <scene is="x3d" .../> 即可

【讨论】：

可以确认。这应该是公认的答案。通过将“is”标签添加到我的自定义元素中，我还能够成功删除警告。任何值都有效，例如：is="custom"。即使是一个空间也足够了。
如果有人在这里标记为，我可以通过使用像这样 anything here 这样的 webview 来解决它。

【解决方案2】：

更新：

使用正确的解决方案查看@triple 的答案： https://stackoverflow.com/a/55537927/1483006

原件：

我并不是说这是你真正应该做的正确事情，但你可以挂钩 console.error 并通过在加载 react-anime 之前将其放在某处来过滤此消息：

const realError = console.error;
console.error = (...x) => {
  // debugger;
  if (x[0] === 'Warning: The tag <g> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.') {
    return;
  }
  realError(...x);
};

它似乎适用于至少在您链接的 GitHub 问题中发布的sample。 :3

【讨论】：

我不再从事这个项目，所以我无法验证它是否有效，但它似乎确实是解决问题的好方法。如果放在开发环境条件后面，它似乎可以正常工作而不会伤害任何东西。
这是一个 hack，但我喜欢它！ +200

【解决方案3】：

我不相信有一种内置方法可以抑制错误消息。

警告消息被正确记录在here in react-dom。您可以分叉 react-dom 并简单地删除错误消息。对于这么小的变化，也许使用像 patch-package 这样的东西会很有用，所以你不必维护一个 fork。

【讨论】：

【解决方案4】：

我的解决方案是创建信封组件，它使用所需的类呈现 <div>：

import React, {Component, DetailedHTMLFactory, HTMLAttributes} from "react";
import classNames from "classnames";

export default class SimpleTagComponent extends Component<SimplePropTypes>{
    baseClassName = 'simpleComponent'

    render() {
        return React.createElement(
            'div',
            {
                ...this.props,
                className: classNames(this.baseClassName, this.props.className),
            },
            this.props.children
        );
    }
}

type SimplePropTypes = HTMLAttributes<HTMLDivElement>

export class MyTag extends SimpleTagComponent {
    baseClassName = 'my'
}

【讨论】：

【解决方案5】：

我有同样的错误。我的问题是 js 的新文件，当我使用 sfc 时，我的名称（标记名）的第一个字母必须是大写字母。我是新人，所以没注意。但我写这个以防万一

【讨论】：

这并不能真正回答问题。如果您有其他问题，可以点击进行提问。要在此问题有新答案时收到通知，您可以follow this question。一旦你有足够的reputation，你也可以add a bounty 来引起对这个问题的更多关注。 - From Review
可能不相关......但是，嘿，我有同样的症状，这解决了错误消息。 jb

【解决方案6】：

React 16 使用 x3dom 组件发出警告。

在组件中包含 is="x3d" 会抑制这些警告。

【讨论】：

【解决方案7】：

我将我的 HTML 包裹在 <svg> 标记中。

https://github.com/facebook/react/issues/16135:

我认为您可能将它们呈现在 <svg> 标记之外。

【讨论】：