Question

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

因此，我决定要做的是每当要显示模式时都打破该约定，并创建一个新元素或新组件并将其直接附加到document.body。

body的子级，我们将不再有堆叠的z-index问题，因此此模式将始终显示100％的时间。至少那是我的想法。

所以我制作了一个名为modal.js

的新组件

在此模式内部，而不是返回在子代上具有某些精美css样式的div，我将返回一个no script标签，这意味着不呈现任何类似内容：

 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，{组件}; 从“ 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;

我期望它能正常工作，也许会出现Inviolant错误，但一定不能：

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

我不确定这是怎么回事。

Answer 1

您为什么不使用React.Fragment？

您可以做类似的事情...

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

export default Modal;

Answer 2

不幸的是，帮助我的Bravo从来没有发布过他的帮助作为答案，因此对于以后的观众来说，帮助我的原因是：

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

对此：

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

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

2 个答案: