SharePoint Online Framework WebPart 魔改亂用

  前言

  最近,經常碰到微軟更新SharePoint Online DOM的情況,然後,頁面裏的WebPart就亂七八糟了,思前想後,找了個解決方法可以規避這個問題,雖然有點劍走偏鋒,但是大家可以看看。

  正文

  1.下面灰色的部分,是我測試用的WebPart,大家可以看到位置比較奇葩,在整個頁面最下方,而不是在正常的Body裏面。

  2.通過DOM可以看出來,我沒有按照套路初始化WebPart,而是在Body的子元素下初始化了一個div,然後把WebPart注入到這裏了,如下圖:

  3.我們可以看下原來的代碼,this.domElement指的是WebPart的根元素,我們通常會把WebPart初始化到這裏,如下圖:

  4.我這裏沒有按照默認的方式,而是先在Body裏插入了一個div,id叫做linyu,然後把WebPart渲染到這個DIV了。

let newDom = document.createElement("div");
newDom.id = "linyu";
document.body.appendChild(newDom);

ReactDom.render(element, newDom);

大家可以看下代碼,這樣做的好處是什麼呢?我通常會隱藏Body下面默認的Div,只留我這一個新入的Div,這樣微軟再在原來的DOM裏做任何更新,就都影響不到我的DOM了,也基本不會影響到我的功能(理性的判斷)。

  總結

  當然,這也不是一個成熟的想法和官方推薦的最佳實踐,反正,大家看看就得了,也許有一些參考價值,挺有意思的。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章