React 门户未显示在顶部答案

【问题标题】：React portal is not showing on topReact 门户未显示在顶部
【发布时间】：2019-12-13 14:54:18
【问题描述】：

我在使用 react create portal 时遇到问题。

模态组件不显示在父级之上。

我在 index.html 中有两个根，一个是“Modal”，另一个是“root”。

在 Modal 中创建的门户不会显示在“根”树的顶部。

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel="stylesheet" type="text/css" href="./style.css" />
</head>
<body>
    <div id="modal"></div>
    <div id="root"></div>
    <script src="App.js"></script>
</body>
</html>

App.js：

import React from "react"
import ReactDOM from "react-dom"
import Modal from  "./Modal"

class App extends React.Component
{
    constructor(){
        super();   
        this.inputNode = React.createRef();  
        this.submitHandler = this.submitHandler.bind(this)   
    }

    submitHandler(){
        console.log("onclided")
        this.inputNode.current.focus();
        event.preventDefault();
    }

    render(){
        return(
            <div>
            <span
            onClick={this.submitHandler}>Name</span>
            <input 
            ref={this.inputNode}
            >
            </input>
            <Modal/>
            </div>
        )
    }
}

ReactDOM.render(<App/>, document.getElementById("root"))

Modal.js：

import React from "react"
import ReactDOM from "react-dom"

const modalRoot = document.getElementById('modal');
class Modal extends React.Component {
    constructor(props) {
      super(props);
      this.el = document.createElement('div');
    }

    componentDidMount() {
      modalRoot.appendChild(this.el);
    }

    componentWillUnmount() {
      modalRoot.removeChild(this.el);
    }

    render() {
      return ReactDOM.createPortal(
        <div>hello modal</div>,
        this.el,
      );
    }
  }

export default Modal;

谁能告诉我我在这里做错了什么？

【问题讨论】：

你为什么用ReactDOM.render(<App/>, document.getElementById("root")) in App.js?应该在index.js文件中。

标签： reactjs portal

【解决方案1】：

在你的 app.js 中

import React from "react"
import ReactDOM from "react-dom"
import Modal from  "./Modal"


const mainContainer = document.getElementById('root');
const portalContainer = document.getElementById('modal');

class App extends React.Component
{
 constructor(){
    super();   
    this.inputNode = React.createRef();  
    this.submitHandler = this.submitHandler.bind(this);
    this.el = document.createElement('div');
 }
 componentDidMount() {
    portalContainer.appendChild(this.el);
 }

 componentWillUnmount() {
    portalContainer.removeChild(this.el);
 }
 submitHandler(){
     console.log("onclided")
     this.inputNode.current.focus();
     event.preventDefault();
 }

    render(){
        return(
            <div>
            <span
            onClick={this.submitHandler}>Name</span>
            <input 
            ref={this.inputNode}
            >
            </input>
            {ReactDOM.createPortal(
    <Modal />,
    portalContainer,
  );}
            </div>
        )
    }
}

ReactDOM.render(<App/>, mainContainer)

在你的 Modal.js 中

import React from "react"
import ReactDOM from "react-dom"

class Modal extends React.Component {

    render() {
       <div>hello modal</div>
    }
  }

export default Modal;

【讨论】：

@Machendra 您的代码不起作用。如果我找到原因，我会告诉你的。

【解决方案2】：

我发现了问题所在。我没有为“模态” div 提供样式位置：固定/绝对，所以默认情况下它是静态的。并且“root”和“modal”都上下显示。我的代码没有问题。

【讨论】：