优化

client/shared/components/Portal/Manager.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+export type State = {
+  portals: {
+    key: number;
+    children: React.ReactNode;
+  }[];
+};
+interface PortalManagerProps {
+  renderManagerView: (children: React.ReactNode) => React.ReactElement;
+}
+export interface PortalManagerState {
+  portals: any[];
+}
+/**
+ * Portal host is the component which actually renders all Portals.
+ */
+export class PortalManager extends React.PureComponent<
+  PortalManagerProps,
+  PortalManagerState
+> {
+  state: State = {
+    portals: [],
+  };
+
+  mount = (key: number, children: React.ReactNode) => {
+    this.setState((state) => ({
+      portals: [...state.portals, { key, children }],
+    }));
+  };
+
+  update = (key: number, children: React.ReactNode) => {
+    this.setState((state) => ({
+      portals: state.portals.map((item) => {
+        if (item.key === key) {
+          return { ...item, children };
+        }
+        return item;
+      }),
+    }));
+  };
+
+  unmount = (key: number) => {
+    this.setState((state) => ({
+      portals: state.portals.filter((item) => item.key !== key),
+    }));
+  };
+
+  render() {
+    const { renderManagerView } = this.props;
+    return this.state.portals.map(({ key, children }, i) => (
+      <React.Fragment key={key}>{renderManagerView(children)}</React.Fragment>
+      // <View
+      //   key={key}
+      //   collapsable={
+      //     false /* Need collapsable=false here to clip the elevations, otherwise they appear above sibling components */
+      //   }
+      //   pointerEvents="box-none"
+      //   style={[StyleSheet.absoluteFill, { zIndex: 1000 + i }]}
+      // >
+      //   {children}
+      // </View>
+    ));
+  }
+}