582. 【前端】React 组件调试小技巧

一般我们在调试单个React组件时，借助于热更新，我们改改代码可以在浏览器实时看到更新，但当项目比较大的时候，我们调试的页面在整个应用中的路由层级比较深，就会导致：每一次咱们修改完一个地方的代码，浏览器自动刷新到了首页，并进入修改的页面，才能看到更新之后的变化。

介于此，这篇分享一个前端调试React组件的方法。

一、使用 createPortal 构建测试组件

scss代码：

.test-container {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: white;
  z-index: 99999999999999999999999999999;
  top: 0;
}

• position: fixed 是 CSS 中一种定位方式，它可以让元素相对于浏览器窗口固定不动，无论页面滚动到哪个位置，该元素都会保持在窗口的固定位置。具体来说，position: fixed 的元素会被从文档流中拖出来，并相对于浏览器窗口进行定位，而不是相对于其父元素。因此，固定定位的元素不会影响其他元素的布局，也不会受到页面滚动的影响。使用固定定位的元素通常用于创建导航栏、悬浮广告或工具栏等需要始终保持在页面顶部或底部的元素。
• 这串样式代码可以让我们的测试组件位于窗口最前端，调试代码时就不需要跳转页面了

tsx代码：

import React, {
    FC,
    useState,
    useEffect,
    ReactNode
} from "react";
import './test-container.scss'
import {createPortal} from "react-dom";

interface TestContainerProps {
    element: ReactNode;
}

export const TestContainer: FC<TestContainerProps> = (props) => {
    const [isReady, setIsReady] = useState<boolean>(false)
    useEffect(() => {
        setIsReady(true)
    }, [])

    if (!isReady) return null
    return createPortal(<article className={"test-container"}>
        {props.element}
    </article>, document.body)
}

TestContainer.defaultProps = {}
export {TestContainer as default} from './test-container'

• 该组件用起来很简单，将需要测试的组件作为一个ReactNode传进来就可以了。

使用示例如下：

<TestContainer element={<IMarkdown content={content}/>} />

• IMarkdown 是我需要测试的组件（对react-markdown的封装）。

总结：作为一个开发，如果开发过程中有件事一直在重复做，那么就应该想解决方案，解决这个问题。比如重复的代码，就可以封装起来。比如重复的文件复制粘贴，在windows下可以写bat脚本，在linux下可以写shell脚本；比如每天都要执行测试用例的执行，就可以集成到CI/CD（continuous integration/continuous deloyment/delivery）中。