我先简单解释一下，然后在最后给出更详细的代码示例。

所以，我在我的父组件中进行了 API 调用，如下所示：

    componentDidMount() {
        const url = 'http://www.hashigozake.co.nz/taplist.xml'
        const proxyURL = 'https://cors-anywhere.herokuapp.com/'
      
        fetch(proxyURL + url)
        .then(res => res.text())
        .then(beerXML => {
          let beerJs = new XMLParser().parseFromString(beerXML)
          this.setState({
            beers: beerJs
          })
        })
      }

... 数据作为 props 传递给 TileList.jsx :

<TileList beerList = {this.state.beers}/>

在 TileList.jsx 中，我正在映射返回的 API 数据：

import React from 'react'
import Tile from './Tile'

const TileList = (props) => {
    props.beerList.children &&
    props.beerList.children.length && 
    console.log(props.beerList.children[0].children);
    return (
        <>
         <h1 className = 'h1-pouring'>Currently Pouring:</h1> 
        <div className = 'tile-container'>
            {
                props.beerList.children &&
                props.beerList.children.length &&
                props.beerList.children[0].children.map(product => {
                     return <Tile product = {product}/>

                })
            } 
        </div> 
        </>
    )
}

export default TileList

....然后将该数据作为 props 传递给 Tile.jsx

import React from 'react'

class Tile extends React.Component  {
    // console.log(`this is the product being passed to Tile: ${props.product.children[8].value}`)
    constructor() {
        super()
        
    }
    render() {
        return (
            <>
             {this.props.product.children[11].value === 'Now' ?
                <div className = 'tile'>
                <h1>{this.props.product.children[0].value}</h1>
                <h3>{this.props.product.children[10].value}</h3>
                <h3>{this.props.product.children[1].value} : {this.props.product.children[2].value}</h3> 
                <h3>ABV {this.props.product.children[3].value}</h3>
                <img src = {this.props.product.children[8].value}/>
                </div>
            :
            null
            }
            </>
            )
    }

}

export default Tile

所以问题就出在这里： <img src = {this.props.product.children[8].value}/> 未在浏览器中呈现图像（我得到的是损坏的图像图标）。 console.log(this.props.children[8].value) 返回 islandlife.png ，这是图像的正确 URL。我还查看了 DOM，图像的节点是 <img src = "islandlife.png"> ==$0

如果有帮助，以下是作为 props 传递的 API 调用数据：

children: Array(15)
0: {name: "Name", attributes: {…}, children: Array(0), value: "Island Life IPA", getElementsByTagName: ƒ}
1: {name: "Volume", attributes: {…}, children: Array(0), value: "300ml/473ml", getElementsByTagName: ƒ}
2: {name: "Price", attributes: {…}, children: Array(0), value: "$10/$13", getElementsByTagName: ƒ}
3: {name: "ABV", attributes: {…}, children: Array(0), value: "6.3%", getElementsByTagName: ƒ}
4: {name: "Handpump", attributes: {…}, children: Array(0), value: "No", getElementsByTagName: ƒ}
5: {name: "Brewery", attributes: {…}, children: Array(0), value: "Eddyline", getElementsByTagName: ƒ}
6: {name: "IBU", attributes: {…}, children: Array(0), value: "", getElementsByTagName: ƒ}
7: {name: "ABV", attributes: {…}, children: Array(0), value: "6.3%", getElementsByTagName: ƒ}
8: {name: "Image", attributes: {…}, children: Array(0), value: "islandlife.png", getElementsByTagName: ƒ}
9: {name: "Country", attributes: {…}, children: Array(0), value: "New Zealand", getElementsByTagName: ƒ}
10: {name: "Description", attributes: {…}, children: Array(0), value: "Fruited IPA", getElementsByTagName: ƒ}
11: {name: "Pouring", attributes: {…}, children: Array(0), value: "Now", getElementsByTagName: ƒ}
12: {name: "IBU", attributes: {…}, children: Array(0), value: "", getElementsByTagName: ƒ}
13: {name: "TapBadge", attributes: {…}, children: Array(0), value: "", getElementsByTagName: ƒ}
14: {name: "Comments", attributes: {…}, children: Array(0), value: "", getElementsByTagName: ƒ}

关于如何呈现图像，您有什么想法吗？谢谢。