HTMLImageElement 作為 React Child 無效

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>標簽，它工作正常。

Answer 1

如錯誤所示， this.state.originalImage是一個對象。 您可能正在尋找src屬性，可以像這樣使用它：

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

Answer 2

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。

Answer 3

另一個想法是dangerouslysetInnerHTML——像這樣？

<div dangerouslySetInnerHTML={{ __html: this.state.originalImage.outerHTML }}/>}