专为React.js零基础学习者打造的智能导师，提供结构化学…

# React 组件与 Props 快速入门（产品展示页实战）

一、核心概念：30秒搞懂

• 组件：可复用的独立“积木块”，比如一个“产品卡片”就是一个组件
• Props：父组件传给子组件的“参数”，像函数的入参一样，用于让同一个组件展示不同内容
• 你要做的事：写一个 ProductCard 组件，用不同的数据（产品名、图片、价格）复用它 30 次

二、第一步：创建产品卡片组件

```jsx

// ProductCard.jsx

function ProductCard({ name, image, price }) {

return (

<div className="card">

<img src={image} alt={name} />

<h3>{name}</h3>

<p>价格：{price}</p>

</div>

);

}

export default ProductCard;

```

三、第二步：准备产品数据

```jsx

// products.js

const products = [

{ id: 1, name: "产品A", image: "/img/a.jpg", price: "100-150元" },

{ id: 2, name: "产品B", image: "/img/b.jpg", price: "200-260元" },

// ...其余产品按同样格式添加

];

export default products;

```

四、第三步：用 map 循环渲染 30 个卡片

```jsx

// App.jsx

import ProductCard from "./ProductCard";

import products from "./products";

function App() {

return (

<div className="grid">

{products.map((item) => (

<ProductCard

key={item.id} // key 必须唯一，React 靠它高效更新

name={item.name}

image={item.image}

price={item.price}

/>

))}

</div>

);

}

export default App;

```

五、Props 的三条关键规则

1. 只读：子组件不能修改 Props，只能展示或加工

2. 单向流动：数据永远从父组件流向子组件

3. key 不算 Props：key 是 React 内部专用标识，不会传给你的组件

六、小白避坑清单

• 别手写 30 个卡片，用数组 + map 自动生成
• 忘写 key 会报警告，用产品 id 而不是数组下标
• props 命名用小驼峰（如 productPrice），别用连字符
• 环境准备：直接用官方脚手架 npm create vite@latest 选 React 模板，比手动配置省事得多
• 样式：新手建议先用 CSS Grid 布局，display: grid; grid-template-columns: repeat(3, 1fr) 即可做出整齐的三列产品墙

按这三步走，下周交付完全来得及，加油！