refactor(Consumer): Not getting DOM through FiberNode, Increase the name prop

demo/src/index.js

@@ -35,7 +35,7 @@ function App() {
         <Route
           path="/a"
           render={() => (
-            <KeepAlive key="A" disabled={!toggle}>
+            <KeepAlive name="Test" disabled={!toggle}>
               <A />
             </KeepAlive>
           )}

package.json

 {
   "name": "react-keep-alive",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Package will allow components to maintain their status, to avoid repeated re-rendering.",
   "author": "Shen Chang",
   "homepage": "https://github.com/Sam618/react-keep-alive",

src/components/Consumer.tsx

 import React from 'react';
 import Comment from './Comment';
 import {LIFECYCLE, ICache, ICacheItem} from './Provider';
-import findDOMNodeByFiberNode from '../utils/findDOMNodeByFiberNode';
 
 interface IConsumerProps {
   children: React.ReactNode;
@@ -15,6 +14,8 @@ interface IConsumerProps {
 class Consumer extends React.PureComponent<IConsumerProps> {
   private renderElement: HTMLElement;
 
+  private commentRef: any;
+
   private identification: string = this.props.identification;
 
   public componentDidMount() {
@@ -23,8 +24,7 @@ class Consumer extends React.PureComponent<IConsumerProps> {
       children,
       keepAlive,
     } = this.props;
-    const {_reactInternalFiber} = this as any;
-    this.renderElement = findDOMNodeByFiberNode(_reactInternalFiber) as HTMLElement;
+    this.renderElement = this.commentRef.parentNode;
     setCache(this.identification, {
       children,
       keepAlive,
@@ -54,7 +54,7 @@ class Consumer extends React.PureComponent<IConsumerProps> {
 
   public render() {
     const {identification} = this;
-    return <Comment>{identification}</Comment>;
+    return <Comment ref={ref => this.commentRef = ref}>{identification}</Comment>;
   }
 }
 

src/components/KeepAlive.tsx

@@ -4,7 +4,8 @@ import keepAlive, {COMMAND} from '../utils/keepAliveDecorator';
 import changePositionByComment from '../utils/changePositionByComment';
 
 interface IKeepAliveProps {
-  key: string;
+  key?: string;
+  name?: string;
   disabled?: boolean;
   _container: any;
 }

src/utils/findDOMNodeByFiberNode.ts

-export default function findDOMNodeByFiberNode(fiberNode: any): HTMLElement | null {
-  if (!fiberNode) {
-    return null;
-  }
-  const {
-    stateNode,
-    return: parent,
-  } = fiberNode;
-  if (!parent) {
-    return stateNode && stateNode.containerInfo;
-  }
-  if (stateNode && stateNode.nodeType) {
-    return stateNode;
-  }
-  return findDOMNodeByFiberNode(parent);
-}

src/utils/keepAliveDecorator.tsx

@@ -19,6 +19,7 @@ export enum COMMAND {
 
 interface IListenUpperKeepAliveContainerProps extends IIdentificationContextConsumerComponentProps, IKeepAliveContextConsumerComponentProps {
   disabled?: boolean;
+  name?: string;
 }
 
 interface IListenUpperKeepAliveContainerState {
@@ -255,6 +256,7 @@ export default function keepAliveDecorator<P = any>(Component: React.ComponentTy
           getLifecycle,
         },
         disabled,
+        name,
         ...wrapperProps
       } = this.props;
       const {activated} = this.state;
@@ -266,9 +268,9 @@ export default function keepAliveDecorator<P = any>(Component: React.ComponentTy
       } = wrapperProps;
       // When the parent KeepAlive component is mounted or unmounted,
       // use the keepAlive prop of the parent KeepAlive component.
-      const propKey = getKeyByFiberNode((this as any)._reactInternalFiber);
+      const propKey = name || getKeyByFiberNode((this as any)._reactInternalFiber);
       if (!propKey) {
-        warn('[React Keep Alive] <KeepAlive> components must have key.');
+        warn('[React Keep Alive] <KeepAlive> components must have key or name.');
         return null;
       }
       const newKeepAlive = getKeepAlive(propKey, include, exclude, disabled);