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

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(, p);

过去多啦不再A梦 · Answer

@ssruoyan
How can you implement this using ES6 syntax?

给我你的怀抱 · Answer

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

typecho · Answer

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,
      (),
      container,
      function () {
          /* callback */
      }
    )
}