reactjs 如何< some-tag>在React中禁止“此浏览器无法识别标记”警告?

eivgtgni  于 2023-01-04  发布在  React
关注(0)|答案(8)|浏览(155)

我在React中使用了带有自定义标签名称的元素,并得到了这些错误的墙。在GitHub中有一个关于主题(https://github.com/hyperfuse/react-anime/issues/33)的问题,有人说:
这是React 16中的新警告消息。与动画/React动画无关,可以安全地忽略此警告。
可以安全地忽略它是件好事,但是当我的代码用无用的错误消息填充控制台时,它仍然无法通过审查。
如何抑制这些警告?

rsl1atfo

rsl1atfo1#

我发现了这个问题的一个潜在的修复方法--如果您正在使用插件(并且可能在其他情况下),您可以使用is属性。
使用X3 d时可在此处找到-只需编写<scene is="x3d" .../>即可

c0vxltue

c0vxltue2#

    • 更新日期:**

请参阅@triple的正确答案:https://stackoverflow.com/a/55537927/1483006

    • 原件:**

我并不是说这是你应该做的正确的事情,但是你可以在react-anime加载之前的某个地方挂接console.error并过滤这个消息:

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

nr7wwzry

nr7wwzry3#

我的解决方案是创建envelope组件,用所需的类呈现<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'
}
rjzwgtxy

rjzwgtxy4#

我不相信有一个内置的方式来抑制错误消息。
这个警告信息就记录在react-dom中,你可以派生react-dom并简单地删 debugging 误信息,对于这样一个小的变化,也许使用patch-package之类的东西会很有用,所以你不必维护一个fork。

dgsult0t

dgsult0t5#

React 16对x3dom组件给出警告。
在组件中包含is=“x3d”会抑制这些警告。

tkclm6bt

tkclm6bt6#

我也遇到了同样的错误。我的问题是当我使用sfc时,js的新文件中的名称(标记名)的第一个字母必须是大写字母。我只是个新手,所以没有注意到这一点。但我写这篇文章只是以防万一。

pengsaosao

pengsaosao7#

我将HTML封装在<svg>标记中。
https://github.com/facebook/react/issues/16135
我认为您可能在<svg>标记之外呈现它们。

z2acfund

z2acfund8#

这是什么摆脱了Web浏览器警告对我来说:

不良:

const SocialMedia = (props) => {
 <socialmedia>
    return (

良好:

const SocialMedia = (props) => {
    return (

相关问题