一般我們在調(diào)試單個(gè)React組件時(shí)移稳，借助于熱更新，我們改改代碼可以在瀏覽器實(shí)時(shí)看到更新爵卒，但當(dāng)項(xiàng)目比較大的時(shí)候导帝，我們調(diào)試的頁面在整個(gè)應(yīng)用中的路由層級比較深守谓，就會導(dǎo)致：每一次咱們修改完一個(gè)地方的代碼，瀏覽器自動(dòng)刷新到了首頁您单，并進(jìn)入修改的頁面斋荞，才能看到更新之后的變化。
介于此虐秦，這篇分享一個(gè)前端調(diào)試React組件的方法平酿。
一、使用 createPortal 構(gòu)建測試組件
scss代碼：
.test-container {
position: fixed;
width: 100vw;
height: 100vh;
background-color: white;
z-index: 99999999999999999999999999999;
top: 0;
}
- position: fixed 是 CSS 中一種定位方式悦陋，它可以讓元素相對于瀏覽器窗口固定不動(dòng)染服，無論頁面滾動(dòng)到哪個(gè)位置，該元素都會保持在窗口的固定位置叨恨。具體來說，position: fixed 的元素會被從文檔流中拖出來挖垛，并相對于瀏覽器窗口進(jìn)行定位痒钝，而不是相對于其父元素秉颗。因此，固定定位的元素不會影響其他元素的布局送矩，也不會受到頁面滾動(dòng)的影響蚕甥。使用固定定位的元素通常用于創(chuàng)建導(dǎo)航欄、懸浮廣告或工具欄等需要始終保持在頁面頂部或底部的元素栋荸。
- 這串樣式代碼可以讓我們的測試組件位于窗口最前端菇怀，調(diào)試代碼時(shí)就不需要跳轉(zhuǎn)頁面了
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'
- 該組件用起來很簡單，將需要測試的組件作為一個(gè)
ReactNode傳進(jìn)來就可以了晌块。
使用示例如下：
<TestContainer element={<IMarkdown content={content}/>} />
-
IMarkdown是我需要測試的組件（對react-markdown的封裝）爱沟。
