Question

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

Answer 1

这似乎是一件坏事，但是......

用法：

return <DomNode node={someDomNode} />;

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

JSBin：http://jsbin.com/hepeboke/2/edit?js,output

代码：

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，我不知道是否有办法解决这个问题，但我认为没有。

Answer 2

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

如何将现有的<img/>元素（HTMLImageElement）附加到Facebook React.js组件？

2 个答案: