react在div里面追加元素_React如何将组件渲染到指定DOM节点详解

前言

众所周知React优点之一就是他的API特别简单。通过render 方法返回一个组件的基本结构，如同一个简单的函数，就可以得到一个可以复用的react组件。但是有时候还是会有些限制的，尤其是他的API中，不能控制组件所应该渲染到的DOM节点，这就让一些弹层组件很难控制。当父元素设置为overflow：hidden的时候，问题就会出现了。

例如就像下面的这样：

我们实际期待的效果是这样的：

幸运的是，虽然不是很明显，但有一个相当优雅的方式来绕过这个问题。我们学到的第一个react函数是render 方法，他的函数签名是这样的:

ReactComponent render(

ReactElement element,

DOMElement container,

[function callback]

)

通常情况下我们使用该方法将整个应用渲染到一个DOM节点中。好消息是该方法并不仅仅局限于此。我们可以在一个组件中，使用ReactDom.render 方法将另一个组件渲染到一个指定的DOM 元素中。作为一个组件的render 方法，其必须是纯净的(例如：不能改变state或者与DOM交互).所以我们需要在componentDidUpdate 或者 componentDidMount 中调用ReactDom.render方法。

另外我们需要确保在父元素被卸载的时候，改组件也要被卸载掉.

整理下，我们得到下面的一个组件：

import Reac