HTMLImageElement不适用于React子元素

Question

我正在尝试在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>标签，它就能正常工作。

- Scruffy

---

@ravibagul91 img.onload是一个在图像加载完成后总是被调用的函数。这是非常常见的。我不确定你的意思是什么。 - Scruffy

请点击此处查看：https://dev59.com/K1sV5IYBdhLWcg3w4iT-#35661553 - Michael Doye

@MichaelDoye 谢谢，这在一定程度上解释了为什么它不起作用。 - Scruffy

Answer 1

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 解析像 div、img、HelloWorld（自定义）等 JSX 元素，并创建 React Elements。

- Sumith

Answer 2

另一个想法是dangerouslySetInnerHTML - 类似这样的东西吗？ <div dangerouslySetInnerHTML={{ __html: this.state.originalImage.outerHTML }}/>

- gray

---

这就是答案，伙计们！ - Sgnl

Answer 3

正如错误提示所说，this.state.originalImage是一个对象。你可能正在寻找它的src属性，你可以这样使用它：

 render() {
    return (
        <main>
          <img src={this.state.originalImage.src}/>
        </main>
    );
}

- Clarity

---

这是一个 HTMLImageElement。我以为我们可以将这样的元素存储在变量中，然后在 React 中渲染它们。在普通的 JavaScript 中，我可以使用 appendChild 将这个图像对象（HTMLImageElement）添加到页面中。 - Scruffy

它将是 this.state.originalImage.attributes.src。 - Michael Doye

@MichaelDoye 这个在哪里说的？https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLImageElement - Clarity