React.createPortal（）

https://blog.csdn.net/sd19871122/article/details/97612107

https://blog.csdn.net/mmzzll2019/article/details/89348085?utm_medium=distribute.pc_relevant.none-task-blog-title-3&spm=1001.2101.3001.4242

createProtal 改造 Modal 组件

在 html 中除了 div#root 之外，给 Modal 预留了一个新的 div#modal-root，：

1. const appRoot = document.getElementById(‘root‘);
2. const modalRoot = document.getElementById(‘modal-root‘);

改造 Modal 容器

新的 Modal 容器组件内容如下：　　

1. class ModalContainer extends Component {
2.  
   constructor(props) {
3.  
   super(props);
4.  
   this.el = document.createElement(‘div‘);
5.  
   }
6.  
   componentDidMount() {
7.  
   modalRoot.appendChild(this.el);
8.  
   }
9.  
   componentWillUnmount() {
10.  
    modalRoot.removeChild(this.el);
11.  
    }
12.  
    render() {
13.  
    return ReactDOM.createPortal(
14.  
    this.props.children,
15.  
    this.el
16.  
    );
17.  
    }
18.  
    }

     

    将 ModalContent 挂载到 ModalContainer 

    1. class App2 extends Component {
    2.  
       state = {
    3.  
       name: ‘clickme‘
    4.  
       }
    5.  
       componentDidMount(){
    6.  
       // console.log(findDOMNode(ref.current))
    7.  
       }
    8.  
       clickHandle = () => {
    9.  
       this.setState({
    10.  
        name: ‘clickme‘ + Date.now()
    11.  
        });
    12.  
        }
    13.  
        render() {
    14.  
        return (
    15.  
        <div className="App">
    16.  
        <ModalContainer>
    17.  
        <ModalContent />
    18.  
        </ModalContainer>
    19.  
        </div>
    20.  
        );
    21.  
        }
    22.  
        }

        即使主组件是 overflow:hidden 的，但是 modal 能够正常出现，同时，因为 div#modal-root 是 z-index: 999，因此会置于最上层。

原文：https://www.cnblogs.com/zwjun/p/13718562.html