将反应组件渲染为单个DOM元素

Question

渲染React组件时，必须将此组件放入文档中已存在的DOM元素中，例如：

React.render(<MyComponent />, document.findElementById('container'));

但是，组件的render函数必须始终返回单个节点，从而产生以下DOM结构：

<div id='container'>
   <div id='myComponent'>
      <!-- Stuff in the component -->
   </div>
</div>

这会创建不必要的DOM元素，因为外部容器也可以发出，因为它没有文档结构的附加值。

就目前而言，无法将多个组件渲染到同一个父组件中（例如正文）：

  

React.render（）替换您传入的容器节点的内容。将来，可以将组件插入现有DOM节点而不覆盖现有子节点。

是否有其他方法来渲染组件而没有任何不必要的父节点？提前致谢！

Answer 1

没有其他办法。您始终需要根节点

  

https://facebook.github.io/react/tips/maximum-number-of-jsx-root-nodes.html

为什么不摆脱硬币并将你的组件直接放到身体上？

React.render(<MyComponent />, document.getElementsByTagName('body')[0]);