feat: remove ReactDom findDomNode (#295)

Author: CoderSerio

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

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',
             });

src/hooks/useHeights.tsx

@@ -1,4 +1,3 @@
-import findDOMNode from 'rc-util/lib/Dom/findDOMNode';
 import * as React from 'react';
 import { useEffect, useRef } from 'react';
 import type { GetKey } from '../interface';
@@ -37,9 +36,8 @@ export default function useHeights<T>(
 
       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);