修改文件夹排序(3143)

src/components/FolderOrder/NewPortal/index.jsx

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+
+//传送门，将dom渲染到body节点
+class NewPortal extends Component {
+    constructor(props) {
+        super(props)
+        // 初始化创建渲染的父元素并添加到body下
+        this.node = document.createElement('div');
+        document.body.appendChild(this.node);
+    }
+    render() {
+        const { visible,children } = this.props;
+        
+        return visible && ReactDOM.createPortal(
+            children,
+            this.node
+        )
+    }
+}
+
+export default NewPortal;

src/components/FolderOrder/index.jsx

@@ -7,6 +7,7 @@ import floderR from './img/floderR.png';
 import floderD from './img/floderD.png';
 import diagUp from '@common/images/diagUp.png';
 import diagDown from '@common/images/diagDown.png';
+import NewPortal from './NewPortal';
 class FolderOrder extends React.Component {
     constructor(props) {
         super(props);
@@ -166,7 +167,9 @@ class FolderOrder extends React.Component {
         const { folderOrderShow,title,folderManage,adminItems,  } = this.props;
         const domNode = document.getElementById('root');
         const items = this.state.folderList
-        return folderOrderShow&&ReactDOM.createPortal(
+        // return folderOrderShow&&ReactDOM.createPortal(
+
+        return <NewPortal visible={folderOrderShow}>
             <div className={style.newFolderWrap}>
                 <div className={style.folderModal} onClick={()=>folderManage(false)}></div>
                 <div className={style.nameWrap}>
@@ -177,7 +180,7 @@ class FolderOrder extends React.Component {
                         <img src={close} alt="关闭" onClick={()=>folderManage(false)}/>
                     </div>
                     <div className={style['delContent']}>
-                        {this.genAdminItems(items,true)}
+                        {items&&items.length > 0 &&this.genAdminItems(items,true)}
                     </div>
                     <div className={style['delFoot']}>
                         <div className={style.halfBtn}>
@@ -188,7 +191,9 @@ class FolderOrder extends React.Component {
                         </div>
                     </div>
                 </div> 
-            </div>,domNode)
+            </div>
+            </NewPortal>
+            // ,domNode)
     }
 }
 export default FolderOrder;