Question

react-empty

<div data-reactroot>
<!-- react-empty: 3 -->
<!-- react-empty: 26 -->
</div>

这个节点是什么？为什么它可以渲染到React组件？这样怎么办？

Answer 1

这实际上是React's internal support for things like null的一部分：

// A perfectly valid component
() => null

// Also a perfectly valid component
const MyComponent = React.createClass({
  render() {
    if (this.props.hidden) return null;
    return <p>My component implementation</p>;
  }
});

Answer 2

请查看创建此内容的React代码的这一部分：

var nodeValue = ' react-empty: ' + this._domID + ' ';
    if (transaction.useCreateElement) {
      var ownerDocument = hostContainerInfo._ownerDocument;
      var node = ownerDocument.createComment(nodeValue);
      ReactDOMComponentTree.precacheNode(this, node);
      return DOMLazyTree(node);
    } else {
      if (transaction.renderToStaticMarkup) {
        // Normally we'd insert a comment node, but since this is a situation
        // where React won't take over (static pages), we can simply return
        // nothing.
        return '';
      }
      return '<!--' + nodeValue + '-->';
    }
  },

所以基本上如果你的组件返回null，它会创建一个注释，显示这个元素是空的，但是React会为你做的就是在那里发表评论所有JavaScript框架试图使用注释在DOM中，为了显示它们处理代码，类似的是ng-if in angular例如......

Answer 3

请注意，使用React＆gt; = 16，您将不会再看到

什么是反应空：*？

3 个答案: