Reactコンポーネント内の生のDOMElementをレンダリングする（appendChild）にはどうすればいいですか？

Question

編集： 重複が見つかりました： How can I append external DOM to React component?

---

は、だから私のような何かを行うことができます。

componentDidMount() { 
    let image = new Image(); 
    image.src = "http://blablabla"; 
    image.onload =() => { 
    this.setState({ loaded: true }); 
    //do something; 
    }; 
    this.image = image; 
} 

render() { 
    if (this.state.loaded) { 
    return toReactElement(this.image); // HOW TO DO THIS 
    } else { 
    return <Foo /> 
    } 
} 

私は何をしようとしていたことnew Image()のように、オフスクリーンのDOMオブジェクトを作成することです（あなたは絵の寸法などを得ることができます）。しかし、appendChildこれはどのノードにもありません。

ロードされたら、appendChildを使用してページに追加します（通常は余分な計算が必要です）。

これは私がReactなしでそれを行う方法です。どのように私はそれをReactで行うことができますか？

Answer 1

具体的な使用例は不明ですが、あなたが探しているものはonLoadというプロパティです。

import React from 'react'; 

class Example extends React.Component { 
    constructor() { 
    super(); 

    this.state = { 
     imageLoaded: false 
    } 
    } 

    doSomething() { 
    console.log('The image has finished loading.'); 

    this.setState({ 
     imageLoaded: true 
    }); 
    } 

    render() { 
    return (
     <img src='/test.png' onLoad={this.doSomething.bind(this)}> 
    ) 
    } 
} 

あなたは画像の読み込みに失敗した場合に利用することをお勧めしますonErrorプロパティもあります。