Question

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

模态成分未显示在父级上方。

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

在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;

有人可以告诉我我在做什么错吗？

Answer 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;

Answer 2

我发现了问题所在。我没有为“ Modal” div提供样式位置：固定/绝对，因此默认情况下它是静态的。并同时显示“根”和“模式”。我的代码没有错。

React门户未显示在顶部

2 个答案: