Javascript 如何附加现有的<；IMG>；元素（HTMLImageElement）到Facebook React.js组件？

我有一个用数据uri生成的IMG DOM元素。如何将其附加到React.js“虚拟DOM”中

当我尝试以下方法时：

myImgComponent = React.createClass({

  getInitialState: function() {
    slowGenerateImage((function(_this) {
      return function(img) { /* img is an HTMLImageElement */
        return _this.setState({
          image: img
        });
      };
    })(this));

    return {image: null};
  },

  render: function() {
    return div(
      {}, 
      this.state.image /* image is a raw HTMLImageElement */
    );
  }
});

我得到以下错误：

Invariant Violation: traverseAllChildren(...): Encountered an invalid child; DOM elements are not valid children of React components. 

---

这似乎是件坏事，但是

用法：

return <DomNode node={someDomNode} />;

返回；

---

注：正如@sookie所指出的，以下内容已过时。在较新的版本中，使用ReactDOM.findDOMNode和类语法

---

JSBin：

代码：

var DomNode=React.createClass({
componentDidMount:function（）{
this.updateNode（this.props.node）；
},
组件将接收道具：函数（下一步）{
if（nextrops.node！==this.props.node）{
this.updateNode（nextrops.node）；
}
},
componentWillUnmount:function（）{
this.updateNode（null）；
},
updateNode:函数（节点）{
var myNode=this.getDOMNode（）；
对于（var i=0；i你能不能改为只渲染
？或者甚至让
慢生成图像
只生成
src
，而不是创建一个元素，然后你就可以直接传递它。
我测试了这个，它确实有效。我怀疑第一个选项会导致浏览器对图像解码两次。谢天谢地，我确实控制了源代码。）所以我可以制作一个返回dataUri而不是完整IMG对象的版本。浏览器可能不会解码两次，除非slowGenerateImage实际将IMG元素插入到文档中。我使用system.js
import image from./image/source.png！image
并像您提到的那样使用image.src谢谢！我希望能有一个ore用于添加外部库生成的DOM节点的通用转义图案填充。虽然我是React新手，但我相信只要生成的DOM节点是无状态的，您的解决方案就是安全的。我打开了React源代码，我同意，可能无法删除额外的div。我们可以更改生成的标记类型，但React似乎假定它正在从标记字符串生成新的DOM节点。代码的关键位似乎是“mountComponent:初始化组件、呈现标记并注册事件侦听器”。注意：getDOMNode（）在React 0.13及更高版本中已被弃用。我们现在必须使用
React DOM
的
findDOMNode（）
@sookie谢谢，添加了一条注释。我的一些答案比吸血鬼还老。。。
var DomNode = React.createClass({
  componentDidMount: function(){
    this.updateNode(this.props.node);
  },
  componentWillRecieveProps: function(nextProps){
    if (nextProps.node !== this.props.node) {
      this.updateNode(nextProps.node);
    }
  },
  componentWillUnmount: function(){
    this.updateNode(null);
  },
  updateNode: function(node){
    var myNode = this.getDOMNode();
    for (var i=0; i<myNode.children.length; i++) {
      myNode.removeChild(myNode.children[i]);
    }

    if (node) {
      myNode.appendChild(node);
    }
  },
  render: function(){
    return <div />
  }
});