javascript - How does the react Modal method in Ant Financial insert elements to the end of the page?

Question

I want to use react to write a public pop-up module, similar to the react Modal method of Ant Financial.

I don’t know what the principle of this implementation is? How can I insert the pop-up window I wrote into the end of the page?

Answer 1

Look at the source code of Modal implementation, it’s easy to understand. To put it simply:

let p = createElement('p');
document.body.appendChild(p);
ReactDOM.render(<Modal />, p);

Answer 2

@ssruoyan
How can you implement this using ES6 syntax?

Answer 3

Whether the modal is visible depends on its visibility. This is a mobile code written today. Not sure what you mean

Answer 4

In fact, it is rendered out of the react scope and uses a component

This involves the ReactDOM.unstable_renderSubtreeIntoContainer interface,
But this interface is not available in the documentation and is marked unstable

Its signature is like this

function(
    parentComponent,
    nextElement,
    container,
    callback,
  )

Probably can be used like this

componentDidMount() {
    const container = document.createElement('p');
    document.body.appendChild(container);
    
    ReactDOM.unstable_renderSubtreeIntoContainer(
      this,
      (<Modal />),
      container,
      function () {
          /* callback */
      }
    )
}

For specific usage, please refer to the usage in react-portal
or the usage in ant design of Ant Financial

The signature and definition can be found here, with comments on it

Actually, I don’t fully understand the usage of this interface... I’m not sure it’s correct. You should read the code in the link above by yourself