如何將現有的<IMG>元素（HTMLImageElement）附加到Facebook React.js組件？

我有一個IMG DOM元素，我用data-uri生成。我如何將它附加到React.js「虛擬DOM」？如何將現有的<IMG>元素（HTMLImageElement）附加到Facebook React.js組件？

當我嘗試以下方法：

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.

來源

2014-07-18 Shane Brinkman-Davis

這似乎是一個壞事情，但是......

用法：

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，我不知道是否有周圍的一個方式，但我不認爲有是。

來源

2014-07-18 01:09:03 FakeRainBrigand

謝謝！我希望有一個更加通用的逃生方法來添加由外部庫生成的DOM節點。雖然我是React的新手，但我相信只要生成的DOM節點是無狀態的，您的解決方案就是安全的。我打開了React源，我同意，可能無法刪除多餘的div。我們可以改變生成的標籤類型，但React似乎認爲它是從標記字符串生成新的DOM節點。代碼的關鍵位似乎是「mountComponent：初始化組件，呈現標記並註冊事件偵聽器」。 –

注意：getDOMNode（）在React 0.13及更高版本中已棄用。我們現在必須使用'react-dom'' findDOMNode（）' – sookie

@sookie謝謝，補充說明。我的一些答案比吸血鬼年齡... – FakeRainBrigand

你可以改爲<img src={this.state.img.src}/>嗎？甚至有slowGenerateImage只生成src，不創建一個元素，那麼你可以直接通過它。

來源

2014-07-18 18:09:13

我測試了這個，它確實有效。我懷疑第一個選項會導致瀏覽器對圖像進行兩次解碼。謝天謝地，我確實控制了源庫，這樣我就可以創建一個返回dataUri而不是完整的IMG對象的版本。 –

瀏覽器可能不會解碼兩次，除非slowGenerateImage實際上將img元素插入到文檔中。 –

我使用system.js從'./image/source.png！image'導入圖像，並使用像你提到的image.src –

如何將現有的<IMG>元素（HTMLImageElement）附加到Facebook React.js組件？

回答

相關問題