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了,也基本不会影响到我的功能(理性的判断)。

  总结

  当然,这也不是一个成熟的想法和官方推荐的最佳实践,反正,大家看看就得了,也许有一些参考价值,挺有意思的。

posted @ 2024-02-10 14:30  霖雨  阅读(11)  评论(0编辑  收藏  举报