feat: remove ReactDom findDomNode

react-component · Dec 30, 2024 · 325c740 · 325c740
1 parent 42dd61e
commit 325c740
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 17 deletions.
diff --git 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
@@ -74,23 +74,23 @@ const Demo = () => {
         <button
           type="button"
           onClick={() => {
-            listRef.current.scrollTo(null);
+            listRef.current?.scrollTo(null);
           }}
         >
           Show scroll bar
         </button>
         <button
           type="button"
           onClick={() => {
-            listRef.current.scrollTo(500);
+            listRef.current?.scrollTo(500);
           }}
         >
           Scroll To 100px
         </button>
         <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
@@ -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);