From 325c74008cc8c945ee9627dcf34d44c862a061e4 Mon Sep 17 00:00:00 2001
From: CoderSerio <2779066456@qq.com>
Date: Tue, 31 Dec 2024 02:12:52 +0800
Subject: [PATCH] feat: remove ReactDom findDomNode

---
 README.md                |  2 +-
 examples/basic.tsx       | 24 ++++++++++++------------
 src/hooks/useHeights.tsx |  6 ++----
 3 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index b23c05e..a894d87 100644
--- a/README.md
+++ b/README.md
@@ -24,7 +24,7 @@ https://virtual-list-react-component.vercel.app/
 ```bash
 npm install
 npm start
-open http://localhost:9001/
+open http://localhost:8000/
 ```
 
 ## Feature
diff --git a/examples/basic.tsx b/examples/basic.tsx
index 2f14a20..c50b32a 100644
--- a/examples/basic.tsx
+++ b/examples/basic.tsx
@@ -74,7 +74,7 @@ const Demo = () => {
         <button
           type="button"
           onClick={() => {
-            listRef.current.scrollTo(null);
+            listRef.current?.scrollTo(null);
           }}
         >
           Show scroll bar
@@ -82,7 +82,7 @@ const Demo = () => {
         <button
           type="button"
           onClick={() => {
-            listRef.current.scrollTo(500);
+            listRef.current?.scrollTo(500);
           }}
         >
           Scroll To 100px
@@ -90,7 +90,7 @@ const Demo = () => {
         <button
           type="button"
           onClick={() => {
-            listRef.current.scrollTo({
+            listRef.current?.scrollTo({
               index: 99999999,
               align: 'top',
             });
@@ -101,7 +101,7 @@ const Demo = () => {
         <button
           type="button"
           onClick={() => {
-            listRef.current.scrollTo({
+            listRef.current?.scrollTo({
               index: 50,
               align: 'top',
             });
@@ -112,7 +112,7 @@ const Demo = () => {
         <button
           type="button"
           onClick={() => {
-            listRef.current.scrollTo({
+            listRef.current?.scrollTo({
               index: 50,
               align: 'bottom',
             });
@@ -123,7 +123,7 @@ const Demo = () => {
         <button
           type="button"
           onClick={() => {
-            listRef.current.scrollTo({
+            listRef.current?.scrollTo({
               index: 50,
               align: 'auto',
             });
@@ -134,7 +134,7 @@ const Demo = () => {
         <button
           type="button"
           onClick={() => {
-            listRef.current.scrollTo({
+            listRef.current?.scrollTo({
               index: 50,
               align: 'top',
               offset: 15,
@@ -146,7 +146,7 @@ const Demo = () => {
         <button
           type="button"
           onClick={() => {
-            listRef.current.scrollTo({
+            listRef.current?.scrollTo({
               index: 50,
               align: 'bottom',
               offset: 15,
@@ -158,7 +158,7 @@ const Demo = () => {
         <button
           type="button"
           onClick={() => {
-            listRef.current.scrollTo({
+            listRef.current?.scrollTo({
               key: 50,
               align: 'auto',
             });
@@ -179,7 +179,7 @@ const Demo = () => {
         <button
           type="button"
           onClick={() => {
-            listRef.current.scrollTo({
+            listRef.current?.scrollTo({
               index: data.length - 2,
               align: 'top',
             });
@@ -190,7 +190,7 @@ const Demo = () => {
         <button
           type="button"
           onClick={() => {
-            listRef.current.scrollTo({
+            listRef.current?.scrollTo({
               index: 0,
               align: 'bottom',
             });
@@ -202,7 +202,7 @@ const Demo = () => {
         <button
           type="button"
           onClick={() => {
-            listRef.current.scrollTo({
+            listRef.current?.scrollTo({
               index: 50,
               align: 'top',
             });
diff --git a/src/hooks/useHeights.tsx b/src/hooks/useHeights.tsx
index 6ab1881..146edde 100644
--- a/src/hooks/useHeights.tsx
+++ b/src/hooks/useHeights.tsx
@@ -1,4 +1,3 @@
-import findDOMNode from 'rc-util/lib/Dom/findDOMNode';
 import raf from 'rc-util/lib/raf';
 import * as React from 'react';
 import { useEffect, useRef } from 'react';
@@ -35,9 +34,8 @@ export default function useHeights<T>(
     const doCollect = () => {
       instanceRef.current.forEach((element, key) => {
         if (element && element.offsetParent) {
-          const htmlElement = findDOMNode<HTMLElement>(element);
-          const { offsetHeight } = htmlElement;
-          const { marginTop, marginBottom } = getComputedStyle(htmlElement);
+          const { offsetHeight } = element;
+          const { marginTop, marginBottom } = getComputedStyle(element);
 
           const marginTopNum = parseNumber(marginTop);
           const marginBottomNum = parseNumber(marginBottom);