React组件props传递异常：App.js向Card.js传值无显示

核心错误 #

你在App.js中给Card组件传递props的方式完全错误——你把props写成了Card标签内部的文本内容，而不是组件的属性。React不会将这些文本解析为props，所以Card组件里的props对象自然拿不到对应值。

修正后的代码 #

App.js 修正部分 #

export default function App() {
  return (
    <div>
      <NavBar></NavBar>
      <Hero></Hero>
      <Licence test="Test123" />
      {/* 正确写法：将props作为组件属性直接传递 */}
      <Card
        img="sports1.webp"
        rating="5.0"
        reviewCount={6}
        country="USA"
        title="Life Lessons with Tiger woods"
        price={120}
      />
    </div>
  );
}

Card.js 保持不变（路径无问题的情况下） #

export default function Card(props) {
  
  console.log(props); // 现在能看到完整的props对象
  
  return (
    <div className="card">
      <img className="card--image" src={`../images/${props.img}`}></img>
      <div className="card--stats">
        <img style={{ height: 30 }} className="card--star" src={star}></img>
        <span className="bold">{props.rating}</span>
        <span className="gray bold">({props.reviewCount})</span>
        <span className="gray bold">{props.country}</span>
        <p className="bold">{props.title}</p>
        <p>
          <span className="bold">from ${props.price} per person</span>
        </p>
      </div>
    </div>
  );
}

额外注意事项 #

• 检查图片路径../images/${props.img}是否正确：如果是Create React App项目，public目录下的资源不需要加../，直接写/images/${props.img}即可；如果是src目录下的图片，需要先导入再使用。
• 确保star图片已正确导入到Card组件中，否则会出现图片加载失败或报错。

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