const containerRef: any = useRef(null)
const mutationObserver = () => {
let MutationObserver = window.MutationObserver
const options = { // 配置参数
attributes: true, // 属性的变动
characterData: true, //节点内容或节点文本的变动
subtree: true // 布尔值,表示是否将该观察器应用于该节点的所有后代节点
}
const mutation = new MutationObserver((mutationRecoards) => {
// Demo发生变化的处理
if (!containerRef.current) return
if (containerRef.current.clientHeight > 424) {
containerRef.current.style.height = "424px"
}
})
mutation.observe(containerRef.current, options); // 开启监听
// 其他配置参数
// childList 子节点的变动(指新增,删除或者更改)
// attributeOldValue 布尔值,表示观察attributes变动时,是否需要记录变动前的属性值
// characterDataOldValue 布尔值,表示观察characterData变动时,是否需要记录变动前的值
// attributeFilter 数组,表示需要观察的特定属性(比如[‘class’,‘src’])
React中使用window.MutationObserver监听Demo变化处理
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 1. 背景 一般前后端使用的是Json格式的报文来进行交互,而SpringBoot默认采用Jackson来帮助我们...
- 如果你点开了这篇文章,说明你已经开始注意到redux了,网上关于redux的介绍很多,此处不多介绍了. 网上关于r...
- 本文主要是以我的另一篇文章的思维过程来操作,希望大家使用后可以记住整个过程,从而活学活用,使用到自己的项目中.参考...
- 在react和vue都一般都会使用一个全局的request方法进行http请求在该方法中需要对200之外的状态码进...