React Uncaught DOMException：无法在“Document”上执行“createElement”：提供的标签名称（“<div>”）不是有效名称答案

【问题标题】：React Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('<div>') is not a valid nameReact Uncaught DOMException：无法在“Document”上执行“createElement”：提供的标签名称（“<div>”）不是有效名称
【发布时间】：2019-04-04 01:37:49
【问题描述】：

在 React 应用程序中，我们总是有一个根组件，而其他一切都是该组件的子组件。

所以我决定做的是在我要显示模式时打破这个约定，并创建一个新元素或新组件并将其直接附加到document.body。

body 的子代我们将不再有堆叠 z-index 问题，因此此模式将始终 100% 出现。或者至少这是我的想法。

所以我制作了一个新组件，名为modal.js

在这个模态中，与其返回一个带有一些花哨css样式的div，我只返回一个无脚本标签，这意味着不要像这样渲染任何东西：

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

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

    export default Modal;

所以当我显示模态组件时，它不会在屏幕上显示任何内容。那么如何在屏幕上显示这个模态呢？

好吧，我决定通过添加componentDidMount() 来做一些解决方法，如下所示：

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

class Modal extends Component {
   componentDidMount() {

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

export default Modal;

所以每当这个组件被挂载或渲染到屏幕上时，我都会在内存中创建一个新的 div 并将其分配给this.modalTarget，如下所示：

从'react'导入反应，{组件}；从‘react-don’导入 ReactDOM；

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

export default Modal;

这是完成的文件：

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;

我期待它能够正常工作，可能会出现违规错误，但肯定不会：

未捕获的 DOMException：无法执行“createElement” “文档”：提供的标签名称 ('<div>') 不是有效名称。

我不确定这里发生了什么。

【问题讨论】：

更改document.createElement(‘<div>’) => document.createElement("div") - 注意缺少<>
@Bravo，这行得通。请张贴你的答案。谢谢。

标签： javascript html css reactjs

【解决方案1】：

Bravo 的评论帮助我解决了这个问题。帮助我的是重构这个：

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

到这里：

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

【讨论】：

【解决方案2】：

你为什么不使用React.Fragment？

你可以做这样的事情......

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

export default Modal;

【讨论】：