[英]HTMLImageElement not valid as a React Child
I'm trying to load an image asynchronously and only when it's been loaded, display it in a React app.我正在尝试异步加载图像,并且只有在加载后才在 React 应用程序中显示它。
componentDidMount() {
const img = new Image();
img.onload = () => {
this.setState({
originalImage: img,
});
}
img.src = './images/testImage.jpg'
}
render() {
return (
<main>
{
this.state.originalImage
}
</main>
);
}
I'm getting below error:我收到以下错误:
Objects are not valid as a React child (found: [object HTMLImageElement])对象作为 React 子对象无效(找到:[object HTMLImageElement])
I would like to know why this error is happening.我想知道为什么会发生此错误。 Of course if I just add an <img>
tag, it works fine.当然,如果我只是添加一个<img>
标签,它工作正常。
As the error says, this.state.originalImage
is an object. 如错误所示, this.state.originalImage
是一个对象。 You probably are looking for it's src
prop, which you can use like so: 您可能正在寻找src
属性,可以像这样使用它:
render() {
return (
<main>
<img src={this.state.originalImage.src}/>
</main>
);
}
React cannot directly display HTML Element. React无法直接显示HTML元素。 If you want to create elements programmatically you have to use functions provided by React. 如果要以编程方式创建元素,则必须使用React提供的功能。
componentDidMount() {
const url = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYd74A26KhImI1w9ZBB-KvWUcasVnQRe_UOrdZPqI4GOIN0mC3EA';
let img = React.createElement(
"img",
{
src: url,
},
)
this.setState({
originalImage: img,
})
let divExample = React.createElement(
'div',
null,
`Hello World`
);
this.setState({
divExample: divExample
})
}
render() {
return (
<div>
<div>Hi</div>
{
this.state.divExample
}
<main>
{
this.state.originalImage
}
</main>
</div>
);
}
React parses jsx element like div, img, HelloWorld (custom) etc. and create React Elements out of it. React解析div,img,HelloWorld(自定义)等jsx元素,并从中创建React Elements。
另一个想法是dangerouslysetInnerHTML——像这样?
<div dangerouslySetInnerHTML={{ __html: this.state.originalImage.outerHTML }}/>}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.