如何在 React 中抑制 "The tag <some-tag> is unrecognized in this browser" 警告？

Question

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

This is a new warning message in React 16. Has nothing to do with anime/react-anime and this warning can safely be ignored.

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

如何禁止这些警告？

Answer 1

我认为没有内置的方法来抑制错误消息。

正确记录警告消息 here in react-dom. You could fork react-dom and simply remove the error message. For a change as small as this, perhaps using something like patch-package 会很有用，这样您就不必维护分叉了。

Answer 2

更新：

请参阅@triple 的正确解决方案：

原版：

我并不是说这是你真正应该做的正确事情，但你可以挂钩 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

Answer 3

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

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

Answer 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'
}

Answer 5

我将 HTML 包装在 <svg> 标签中。

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

I think you're probably rendering them outside of <svg> tags.

Answer 6

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

Answer 7

React 16 对 x3dom 组件发出警告。

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

如何在 React 中抑制 "The tag <some-tag> is unrecognized in this browser" 警告？

How can I suppress "The tag <some-tag> is unrecognized in this browser" warning in React?

warnings

reactjs