web-dev-qa-db-ja.com

Reactで「タグ<some-tag>はこのブラウザーで認識されません」という警告を抑制するにはどうすればよいですか？

Reactでカスタムタグ名の要素を使用していて、これらのエラーの壁を取得しています。件名にGitHubの問題があります（ https://github.com/hyperfuse/ react-anime/issues/ ）誰かが述べています：

これは、React 16の新しい警告メッセージです。anime/ react-animeとは関係なく、この警告は無視しても問題ありません。

安全に無視できるのはいいことですが、コードがコンソールに無用のエラーメッセージを表示しているときは、精査に合格しません。

これらの警告を抑制するにはどうすればよいですか？

reactjswarnings
14
Seph Reed

これは正しいことだとは言っていませんが、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

4
John Jones

エラーメッセージを抑制する組み込みの方法があるとは思いません。

警告メッセージは正しく記録されます ここではreact-dom 。あなたはreact-domをフォークし、単にエラーメッセージを削除することができます。これほど小さな変更の場合、おそらく patch-package のようなものを使用すると便利なので、フォークを維持する必要はありません。

2
TLadd

この問題の潜在的な修正を見つけました-プラグインを使用している場合（および他の状況で）、is属性を使用できます。

X-dで作業しているときに here が見つかりました-単に<scene is="x3d" .../>機能

1
triple

私の解決策は、目的のクラスで<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'
}
0
d9k