Watermark container size changes, resulting in incomplete display or disappearance of watermarks #48660
Conversation
|
|
|
|
👁 Visual Regression Report for PR #48660 Passed ✅
🎊 Congrats! No visual-regression diff found. 
|
|
What's related issue or reproduce? |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
Have been updated |
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #48660 +/- ##
===========================================
- Coverage 100.00% 99.99% -0.01%
===========================================
Files 746 746
Lines 12994 12998 +4
Branches 3411 3412 +1
===========================================
+ Hits 12994 12997 +3
- Misses 0 1 +1 ☔ View full report in Codecov by Sentry. |
components/watermark/index.tsx
Outdated
| @@ -222,6 +224,8 @@ const Watermark: React.FC<WatermarkProps> = (props) => { | |||
| mutations.forEach((mutation) => { | |||
| if (reRendering(mutation, isWatermarkEle)) { | |||
| syncWatermark(); | |||
| } else if (reRendering(mutation, isWatermarkContainer)) { | |||
| setContainerKey(containerKey + 1); | |||
There was a problem hiding this comment.
感觉搞复杂了，如果只是需要更新视图的话，直接用 forceUpdate 就可以了吧：
import useForceUpdate from '../_util/hooks/useForceUpdate';
const forceUpdate = useForceUpdate();
if (xxxx) {
forceUpdate();
}There was a problem hiding this comment.
用时间戳做 key 的初始值感觉不是很好的解法，初始值还不如直接写 0 好了，另外 new Date().getTime() 可以简写为 Date.now()
There was a problem hiding this comment.
我曾经尝试过使用useForceUpdate（useReducer）方法来触发视图更新，但是没有解决这个问题
但是我采用了您key初始值为0的建议
**解决思路：**父元素旧的dom替换成新的dom，如果不换成新的dom浏览器控制台设置的属性将不会消失（如果您有更好的解决思路可以提出）
**解决方案：**将父元素div的key进行更新，react的diff算法检测到前后key不一致，会调用ReactElement方法来生成新的fiberNode，最终产生一个新的真实dom
为什么useReducer方法无法解决这个问题
useReducer只是触发视图的更新，父元素的key或type没有发生改变，react会复用这个老的真实dom，导致浏览器控制台设置的CSS属性依旧存在
@765477020 录个视频看看？ |
@765477020，想看看说的问题具体是什么样子的。 |
您好，研究了半天搞了一个录屏，但是分辨率不是很高，抱歉 2024-05-07.10-05-24.mp4 |
| @@ -222,6 +224,8 @@ const Watermark: React.FC<WatermarkProps> = (props) => { | |||
| mutations.forEach((mutation) => { | |||
| if (reRendering(mutation, isWatermarkEle)) { | |||
| syncWatermark(); | |||
| } else if (reRendering(mutation, isWatermarkContainer)) { | |||
| setContainerKey((x) => x + 1); | |||
There was a problem hiding this comment.
不能用 key 来做重新渲染，这样内部的子元素也会全部重新渲染。这里应该是只有 container 和 watermark 保活才行。
There was a problem hiding this comment.
这里需要检测一下 height 和 scrollHeight 变化，然后重新设置一下 div 的 style。
中文版模板 / Chinese template
🤔 This is a ...
🔗 Related issue link
在浏览器控制台修改Watermark组件的父div尺寸时，水印显示不全或消失
💡 Background and solution
通过MutateObserver API来监听container dom的属性值是否发生变化
当dom属性值发生变化时，更新container的key值，利用react的diff算法key值发生变化重新渲染
📝 Changelog
☑️ Self-Check before Merge