From 35e6263fd0f496d9c04348c690f5be98f8fc1e23 Mon Sep 17 00:00:00 2001
From: yanmao <55792257+yanmao-cc@users.noreply.github.com>
Date: Wed, 24 Nov 2021 19:34:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E8=AF=84=E8=AE=BA?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=AE=9A=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/react/components/comment/index.tsx | 24 +++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/examples/react/components/comment/index.tsx b/examples/react/components/comment/index.tsx
index 5df0a9d2..9c16664b 100644
--- a/examples/react/components/comment/index.tsx
+++ b/examples/react/components/comment/index.tsx
@@ -189,7 +189,25 @@ const Comment: React.FC<CommentProps> = forwardRef<CommentRef, CommentProps>(
 		 * 在 加载数据完毕 或者 列表数据 更新后，设置每个评论项位置
 		 */
 		useEffect(() => {
-			if (loading) return;
+			const update = () => {
+				setList((list) => {
+					return list.concat().map((item) => {
+						const top = getRectTop(
+							`[data-comment-id="${item.id}"]`,
+						);
+						if (top < 0) return item;
+						return { ...item, top };
+					});
+				});
+			};
+			const resizeObserver = new ResizeObserver(update);
+			resizeObserver.observe(editor.container[0]);
+			return () => {
+				resizeObserver.unobserve(editor.container[0]);
+			};
+		}, []);
+
+		useEffect(() => {
 			updateHeight();
 			normalize();
 		}, [loading, list]);
@@ -210,7 +228,9 @@ const Comment: React.FC<CommentProps> = forwardRef<CommentRef, CommentProps>(
 		 * @param selectors css 选择器
 		 * @returns
 		 */
-		const getRectTop = (selectors: string | NodeInterface): number => {
+		const getRectTop = (
+			selectors: string | NodeInterface | Node,
+		): number => {
 			//获取选择器节点
 			let element =
 				typeof selectors === 'string'