React编译无错props正常但图片、h3/span内容不显示问题

安全阿岳

2026-8-28

问题原因

核心问题是React组件传参时props名称大小写不匹配：React的props是严格区分大小写的，你父组件传入的属性名和子组件里接收、使用的属性名完全对不上，所以渲染时拿不到对应的值。
你在开发者工具里看到props有值，是因为传入的name/type/image确实存在于props对象上，但你子组件解构时写的是NamePoke/TypePoke/ImagePoke三个大驼峰命名的属性，这三个属性在props里根本不存在，实际值全是undefined，自然图片加载不出来，h3和span里也没有文本。

两边命名的对应差异：

父组件ListPoke遍历传值时，传入的三个属性名：name（存宝可梦名称）、type（存宝可梦属性）、image（存宝可梦图片地址）
子组件ItemPoke解构props时，写的三个接收名：NamePoke、TypePoke、ImagePoke，和传入的属性名完全不匹配

修复方案

两种改法选一种就行，保证两边命名完全一致：

方案1：改子组件（更推荐，符合React常规小驼峰props命名习惯）

调整ItemPoke组件的解构参数和内部使用的变量名，和父组件传入的属性名对齐，修改后代码如下：

import '../App.css';

function ItemPoke({name, type, image}) {
  return (
    <article className='list-pokemons-item'>
      <div className='list-pokemons-item-content'>
        <img 
          src={image} 
          alt="pokemon-1"
        />
        <h3>{name}
          <span>{type}</span>
        </h3>
      </div>
    </article>
  );
}

export default ItemPoke;

补充小优化：img是自闭合标签，不需要额外写</img>闭合，直接在开头标签末尾加/闭合即可，写法更规范。

方案2：改父组件

如果要保留子组件的大驼峰命名，就把父组件传参时的属性名改成和子组件一致，修改ListPoke里的map渲染部分即可：

const ListaPokemons = pokemons.map ((item, index) => {
  return(
    <ItemPoke 
      key={index} 
      NamePoke={item.name} 
      TypePoke={item.type} 
      ImagePoke={item.sprite} 
    />
  ) 
})

改完保存刷新页面，图片和文本就能正常显示了。