Javascript 如何在react中使用新图像（）

我试图防止图像在状态更改时重新加载。 下图变量被传递到自定义react组件的props中。
var img=新图像（）；我已经设置了src、title、desc等

所以我的问题是。 在自定义react组件中，如何获取图像对象（现在是名为img的道具）并在渲染函数中显示它

我已经试过了

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

render:function（）{
返回{this.props.img}
}

---

但我一直得到一个DOM元素不是React components错误的有效子元素。

我认为您试图做的是创建一个图像类型的新DOMNode，并将其作为

的子元素进行渲染。如果这是对的，你正在做一些你不该做的事情。两种选择：

选项1（最佳）：在组件模板中呈现图像标记

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

render:function（）{
返回(
);
}

选项2（不太好）：将图像呈现为HTML字符串实体

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

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

renderHTML:function（）{
返回{
__html:'
}
},
render:function（）{
返回(
);
}

---

希望有帮助

Image构造函数返回一个

HTMLImageElement

接口

因此，要渲染您的

img

道具，正如您提到的，它是使用

var img=new Image（）

创建的，您基本上必须创建一个元素并渲染它

您可以通过

JSX

constyourcomponent=（{img}）=>

或

如果需要以编程方式执行，请使用

React.CreateElement

语法

constyourcomponent=（{img}）=>{
const myImage=React.createElement（“img”{
src:img.src，
//您需要的任何其他图像属性都转到此处
}，空）；
返回(
{myImage}
);
}

您是否尝试过将image元素作为JSX写入？例如：

return

您可以使用扩展运算符将其写得更干净：

。这实际上只是传递字符串，这会导致基本上，这两个选项都会创建一个带有

标记的新图像。这不是发问者想要的，而是重用一个已经用JavaScript.new Image（）创建的

Image

对象，这个对象除了在React中用作道具外很难使用。对于img对象的更改，此处是否有所有

img.props

的性能注意事项？虚拟DOM装载并重新呈现（或匹配？）

img.props.style

更改，但如果字段是在sync函数之外定义的，则不会更改。第二个选项指导我们使用静态道具，比如

style={{{width:'100%}

，所以我选择导出

class

包装{

React.createElement for import（）。然后（img=>img.default）

和

window.URL.createObjectURL（blob），src

}，仅作为change的css

calc

而不是所有的

props

，我只是假设这很重要