react console 显示在 div 上

最新推荐文章于 2025-03-30 10:55:06 发布

风丶子

最新推荐文章于 2025-03-30 10:55:06 发布

阅读量556

点赞数 1

分类专栏：笔记文章标签： reactjs js javascript

本文链接：https://blog.youkuaiyun.com/gqf19891018/article/details/119040285

版权

将React应用中的console信息显示在页面的div组件上，提供一个半透明大圆圈以展示信息列表，支持移动位置且位置自动保存。底部包含隐藏、清空和底部定位三个功能按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react console 显示在 div 上

console 打印信息显示到页面的组件。点击半透明大圆圈，展示信息列表；为了不遮挡界面的功能，支持移动位置，移动后位置自动保存；底部有三个按钮，隐藏、清空、底部(点击后直接内容底部)

index.jsx

import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';
import './index.less';

const CONSOLE_SAVE_KEY = 'CONSOLE_SAVE_KEY';

const Console = () => {
  const [msgs, setMsgs] = useState([]);
  const [show, setShow] = useState(false);
  const [pageX, setPageX] = useState(10);
  const [pageY, setPageY] = useState(20);

  // 陷阱：防止清空后重复出现
  const msgsRef = useRef(msgs);
  const listEndRef = useRef(null);

  let timeout = null;

  useEffect(() => {
    const pages = JSON.parse(localStorage.getItem(CONSOLE_SAVE_KEY) || '{}');
    setPageX(pages.pageX);
    setPageY(pages.pageY);
  }, []);

  useEffect(() => {
    console.log = (function(logFunc) {
      return function() {
        try {
          let arr = []
          arr.push(...arguments)
          arr.forEach((item, index) => {
            if (Object.prototype.toString.call(item) === '[object Object]' ||
              O

最低0.47元/天解锁文章