React.js技术问题：DOM中图片标签(img)无法渲染

嘿，我一眼就揪出问题所在啦！你的All组件犯了React里一个超常见的小错误——React函数组件的返回值只能有一个根元素，而你现在直接返回了用逗号分隔的<img>和<h1>两个元素，这会导致React只渲染最后一个元素（也就是<h1>），<img>直接被丢弃了，所以页面上看不到图片。

为什么会这样？ #

React要求组件返回单一的React元素（或者null/undefined），当你用逗号分隔多个元素时，JavaScript会把这当成逗号表达式，最终只返回最后一个表达式的结果，所以<img>就被直接忽略掉了。

解决方案 #

有两种常用方式可以修复这个问题，按需选择就行：

1. 使用React Fragment（推荐）

Fragment能让你在不添加额外DOM节点的前提下包裹多个元素，用简洁的短语法<>和</>就可以实现：

const All = (props) => {
  return (
    <>
      <img src={props.imgSrc} alt={props.title} />
      <h1>{props.title}</h1>
    </>
  )
}

如果你需要支持更老的React版本，也可以显式使用<React.Fragment>标签，效果完全一致：

import React from 'react'

// ...其他代码不变

const All = (props) => {
  return (
    <React.Fragment>
      <img src={props.imgSrc} alt={props.title} />
      <h1>{props.title}</h1>
    </React.Fragment>
  )
}

2. 用容器元素包裹（比如div）

如果不在意多一个额外的DOM节点，也可以用普通的<div>把两个元素包起来：

const All = (props) => {
  return (
    <div>
      <img src={props.imgSrc} alt={props.title} />
      <h1>{props.title}</h1>
    </div>
  )
}

另外顺便提个小建议：你把img的alt属性写为"none"，建议改成和标题对应的文字（比如props.title），这样对无障碍访问会更友好哦～

内容的提问来源于stack exchange，提问作者JS Member