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

我尝试做的是创建一个屏幕外的DOM对象，比如new Image()（这样你就可以获得图片的尺寸或类似的东西），但不要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属性。

如何在React组件中渲染（appendChild）原始DOMElement？

1 个答案: