什么是 react-empty: *？

Question

react-empty

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

这个节点是什么？为什么可以渲染成React组件？如何做到这一点？

- Leen

Answer 1

这实际上是 React 对于像 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>;
  }
});

- Sean Vieira

---

哇！谢谢！如果我使用ajax获取服务器渲染的组件字符串，例如'<div data-react-class="Show" data-react-props="{}"></div>'，我想将其挂载在此节点上。如何实现？ - Leen

Answer 2

请注意，在 React >= 16 版本中，你将不再看到 <!-- react-empty: X --> 的出现。

- tanguy_k

Answer 3

看一下这段 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会通过在那里放置一个注释<!-- react-empty: 3 -->来为您处理。所有JavaScript框架都试图在DOM中使用注释来显示它们处理代码，例如Angular中的ng-if。

- Alireza

---

我希望英文更清晰一些 - 我差不多能理解这个答案。 - user1944491