javascript - 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>
    );
}

我遇到以下错误:

Objects are not valid as a React child (found: [object HTMLImageElement])

我想知道为什么会出现这个错误。当然，如果我只添加 <img>标签，它工作正常。

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 解析 jsx 元素，如 div、img、HelloWorld(自定义)等，并从中创建 React 元素。