如何附加现有的<IMG>元素(HTMLImageElement)到一个Facebook React.js组件

How do I attach an existing <IMG> element (HTMLImageElement) to a Facebook React.js component?

本文关键字：组件 js React 一个 Facebook 元素 何附加 IMG HTMLImageElement      更新时间：2023-09-26

我有一个用data-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.

你可以只渲染<img src={this.state.img.src}/>吗?或者甚至让slowGenerateImage生成src，而不是创建一个元素，然后你可以直接传递它

这似乎是一件不好的事情，但是…

用法:

return <DomNode node={someDomNode} />;

注意:下面是过时的，正如@sookie指出的那样。在较新的版本中，您使用ReactDOM。

JSBin: http://jsbin.com/hepeboke/2/edit?js输出

代码:

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 />
  }
});

注意:这确实插入了一个额外的div，我不知道是否有办法，但我认为没有。

相关文章：