一般我们在调试单个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的封装）。
