如何使用新的Image()进行反应

Question

我试图在状态改变时保持图像不重新加载.下面的图像变量被传递到自定义反应组件的道具中.
var img = new Image(); 我已经设置了src,title,desc等.

所以我的问题是.在自定义反应组件中,如何获取图像对象(现在是标题为img的道具)并将其显示在渲染功能中？

我已经试过了

render: function(){
  return <div>{this.props.img}</div>
}

但我一直得到一个DOM元素是React组件错误无效的子元素.

Answer 1

我认为你要做的是创建一个新的图像变种DOMNode并将其渲染为一个孩子<div>.如果这是对的,那么你正在做一些React不能做的事情.两种选择:

选项1(最佳):在React组件模板中渲染图像标记

render: function() {
    return (
        <div>
            <img src={'url-to-your-image'} />
        </div>
    );
}

选项2(不太好):将图像渲染为HTML字符串实体

renderHTML: function() {
    return {
        __html : '<img src="url-to-your-image" />'
    }
},

render: function() {
    return (
        <div dangerouslySetInnerHTML={this.renderHTML()} />
    );
}

希望有所帮助!

Answer 2

该Image构造函数返回一个HTMLImageElement接口。

因此，要渲染您的img道具，正如您提到的，它是使用创建的var img = new Image()，您基本上必须创建一个元素并渲染它。

你可以通过 JSX

const YourComponent = ({img}) => <img src={img.src} alt="foo" />

或者

React.CreateElement如果需要以编程方式执行，请使用语法。

const YourComponent = ({img}) => {

  const myImage = React.createElement("img", {
     src: img.src,
     // any other image attributes you need go here
  }, null);

  return (
    {myImage}
  );
}