React Uncaught DOMException：无法在“文档”上执行“createElement”：提供的标签名称（“<div> &#39;) 不是有效名称

Question

In react applications, we always have a root component and everything else is a child of that component.

So what I decided to do is break that convention whenever I am going to display a modal, and create a new element or a new component and append it directly to document.body .

a child of body we will not have anymore stacking z-index issues, so this modal will always show up 100% of the time. Or at least that was my thinking.

So I made a new component called modal.js

Inside of this modal, rather than returning a div with some fancy css styling on its children I am just going to return a no script tag which means don't render anything like so:

 import React, { Component } from 'react';
    import ReactDOM from ‘react-dom’;

    class Modal extends Component {
       render() {
          return <noscript />;
       }
    }

    export default Modal;

So when I display the modal component its not going to display anything on the screen whatsoever. So then how do I get this modal on the screen then?

Well, I decided to do a bit of a workaround by adding in a componentDidMount() like so:

import React, { Component } from 'react';
import ReactDOM from ‘react-don’;

class Modal extends Component {
   componentDidMount() {

    }
   render() {
      return <noscript />;
   }
}

export default Modal;

So whenever this component gets mounted or rendered to the screen I am going to create a new div in memory and assign it to this.modalTarget like so:

import React, { Component } from 'react'; import ReactDOM from 'react-don';

class Modal extends Component {
   componentDidMount() {
      this.modalTarget = document.createElement(‘<div>’);
    }
   render() {
      return <noscript />;
   }
}

export default Modal;

Here is the finished file:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Modal extends Component {
  componentDidMount() {
    this.modalTarget = document.createElement('<div>');
    this.modalTarget.className = 'modal';
    document.body.appendChild(this.modalTarget);
    this._render();
  }

  componentWillUpdate() {
    this._render();
  }

  componentWillUnmount() {
    ReactDOM.unmountComponentAtNode(this.modalTarget);
    document.body.removeChild(this.modalTarget);
  }

  _render() {
    ReactDOM.render(<div>{this.props.children}</div>, this.modalTarget);
  }
  render() {
    return <noscript />;
  }
}

export default Modal;

I was expecting for this to work, maybe get an Inviolant error, but certain not:

Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('<div>') is not a valid name.

I am not sure what is going on here.

Answer 1

A comment from Bravo helped me solve this. What helped me was refactoring this:

this.modalTarget = document.createElement('<div>');

to this:

this.modalTarget = document.createElement('div');

Answer 2

Why don't you use the React.Fragment ?

You could do something like that...

const Modal = () => (
  <React.Fragment>
    <noscript />
  </React.Fragment>
);

export default Modal;