我正在尝试异步加载图像,并且仅在加载图像后才将其显示在 React 应用程序中。
componentDidMount() {
const img = new Image();
img.onload = () => {
this.setState({
originalImage: img,
});
}
img.src = './images/testImage.jpg'
}
render() {
return (
<main>
{
this.state.originalImage
}
</main>
);
}
我收到以下错误:
对象作为 React 子对象无效(找到:[object HTMLImageElement])
我想知道为什么会发生这个错误。当然,如果我只是添加一个<img>
标签,效果很好。
React 无法直接显示 HTML 元素。如果你想以编程方式创建元素,你必须使用 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 解析 jsx 元素,如 div、img、HelloWorld(自定义)等,并从中创建 React 元素。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)