React useState 设置状态导致 <canvas> 附加到 html

Question

React useState，当我设置状态时，一些奇怪的 <canvas> 附加到 main <html>!

import React, { useState } from 'react';
import './style.scss';

export default () => {
    const [auth, setAuth] = useState(false);
    const handleAuth = () => setAuth(true);

    return (
        <header>
            <button onClick={handleAuth}>handle auth</button>
        </header>
    );
};

单击按钮时，奇怪的 <canvas> 附加到 <html> 开头。

<html lang="en">
<canvas style="inset: 0px; pointer-events: none; position: fixed; z-index: 1000000000;" width="1920" height="514"></canvas>
<head>
...

Answer 1

尝试以隐身模式查看您的网站。
任何浏览器扩展都可能发生这种情况。

Answer 2

这个 canvas 从“React Developer Tools”扩展中注入。它用于在组件呈现时突出显示更新。

React useState 设置状态导致 <canvas> 附加到 html

React useState set state causes <canvas> append to html

html

javascript

reactjs

use-state