初级
React 基础入门 - 组件与 Props
3 分钟阅读
2025-12-31
45分钟
教程概述
学习如何创建可复用的 React 组件，理解 Props 的概念和使用方法，构建更加模块化的应用。
目录
React 组件深入
在上一节中，我们创建了第一个 React 应用并了解了基本的组件结构。现在让我们深入学习如何创建和使用自定义组件。
什么是组件？
组件是 React 应用的基本构建块。你可以把组件想象成：
- 🧩 乐高积木 - 可以组合成复杂的结构
- 🏗️ 建筑模块 - 每个组件负责特定的功能
- 🔧 工具函数 - 接收输入，返回 UI 输出
创建你的第一个自定义组件
让我们创建一个简单的欢迎组件：
// 创建 Welcome.js 文件
import React from 'react';
function Welcome(props) {
return (
<div className="welcome-card">
<h2>欢迎，{props.name}!</h2>
<p>你的角色是：{props.role}</p>
</div>
);
}
export default Welcome;
在 App 组件中使用
// App.js
import React from 'react';
import Welcome from './Welcome';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<h1>我的 React 应用</h1>
<Welcome name="张三" role="前端开发者" />
<Welcome name="李四" role="UI 设计师" />
<Welcome name="王五" role="产品经理" />
</header>
</div>
);
}
export default App;
Props：组件间的数据传递
Props（properties 的缩写）是 React 中组件间传递数据的方式。
Props 的特点
- 只读性 - Props 是只读的，不能在组件内部修改
- 单向数据流 - 数据从父组件流向子组件
- 类型多样 - 可以传递字符串、数字、对象、函数等
Props 的使用方式
1. 基本数据类型
function UserCard(props) {
return (
<div className="user-card">
<h3>{props.name}</h3>
<p>年龄：{props.age}</p>
<p>邮箱：{props.email}</p>
</div>
);
}
// 使用组件
<UserCard
name="张三"
age={25}
email="zhangsan@example.com"
/>
2. 对象和数组
function ProductList(props) {
return (
<div className="product-list">
<h3>{props.title}</h3>
<ul>
{props.products.map((product, index) => (
<li key={index}>
{product.name} - ¥{product.price}
</li>
))}
</ul>
</div>
);
}
// 使用组件
const products = [
{ name: "iPhone 15", price: 5999 },
{ name: "MacBook Pro", price: 12999 },
{ name: "iPad Air", price: 4399 }
];
<ProductList
title="热门产品"
products={products}
/>
3. 函数作为 Props
function Button(props) {
return (
<button
className={`btn ${props.type}`}
onClick={props.onClick}
>
{props.children}
</button>
);
}
// 使用组件
function App() {
const handleClick = () => {
alert('按钮被点击了！');
};
return (
<div>
<Button type="primary" onClick={handleClick}>
点击我
</Button>
</div>
);
}
组件的组合
React 的强大之处在于组件的组合能力。让我们创建一个更复杂的例子：
// Card.js - 卡片容器组件
function Card(props) {
return (
<div className="card">
<div className="card-header">
<h3>{props.title}</h3>
</div>
<div className="card-body">
{props.children}
</div>
</div>
);
}
// Avatar.js - 头像组件
function Avatar(props) {
return (
<img
className="avatar"
src={props.src}
alt={props.alt}
style={{ width: props.size, height: props.size }}
/>
);
}
// UserProfile.js - 用户资料组件
function UserProfile(props) {
return (
<Card title="用户资料">
<div className="user-profile">
<Avatar
src={props.user.avatar}
alt={props.user.name}
size="80px"
/>
<div className="user-info">
<h4>{props.user.name}</h4>
<p>{props.user.bio}</p>
<div className="user-stats">
<span>粉丝：{props.user.followers}</span>
<span>关注：{props.user.following}</span>
</div>
</div>
</div>
</Card>
);
}
默认 Props
我们可以为组件设置默认的 Props 值：
function Greeting(props) {
return <h2>Hello, {props.name}!</h2>;
}
// 设置默认 Props
Greeting.defaultProps = {
name: 'Guest'
};
// 或者使用 ES6 默认参数
function Greeting({ name = 'Guest' }) {
return <h2>Hello, {name}!</h2>;
}
Props 解构
为了让代码更简洁，我们可以使用解构赋值：
// 传统方式
function Welcome(props) {
return (
<div>
<h2>{props.name}</h2>
<p>{props.message}</p>
</div>
);
}
// 解构方式
function Welcome({ name, message }) {
return (
<div>
<h2>{name}</h2>
<p>{message}</p>
</div>
);
}
// 带默认值的解构
function Welcome({ name = 'Guest', message = 'Welcome!' }) {
return (
<div>
<h2>{name}</h2>
<p>{message}</p>
</div>
);
}
实践项目：个人名片组件
让我们创建一个完整的个人名片组件：
// PersonCard.js
import React from 'react';
import './PersonCard.css';
function PersonCard({
name,
title,
company,
email,
phone,
avatar,
skills = []
}) {
return (
<div className="person-card">
<div className="card-header">
<img src={avatar} alt={name} className="avatar" />
<div className="basic-info">
<h3>{name}</h3>
<p className="title">{title}</p>
<p className="company">{company}</p>
</div>
</div>
<div className="card-body">
<div className="contact-info">
<div className="contact-item">
<span className="icon">📧</span>
<span>{email}</span>
</div>
<div className="contact-item">
<span className="icon">📱</span>
<span>{phone}</span>
</div>
</div>
{skills.length > 0 && (
<div className="skills">
<h4>技能</h4>
<div className="skill-tags">
{skills.map((skill, index) => (
<span key={index} className="skill-tag">
{skill}
</span>
))}
</div>
</div>
)}
</div>
</div>
);
}
export default PersonCard;
使用这个组件：
// App.js
import PersonCard from './PersonCard';
function App() {
const person = {
name: "李小明",
title: "前端工程师",
company: "科技有限公司",
email: "lixiaoming@example.com",
phone: "138-0000-0000",
avatar: "/images/avatar.jpg",
skills: ["React", "JavaScript", "TypeScript", "CSS", "Node.js"]
};
return (
<div className="App">
<PersonCard {...person} />
</div>
);
}
组件设计原则
在设计组件时，遵循以下原则：
1. 单一职责原则
每个组件应该只负责一个功能。
2. 可复用性
设计组件时考虑在不同场景下的复用。
3. Props 接口清晰
明确定义组件需要哪些 Props，提供合理的默认值。
4. 组件命名
使用有意义的名称，遵循 PascalCase 命名规范。
小结
在这一节中，我们学习了：
- ✅ 如何创建自定义 React 组件
- ✅ Props 的概念和使用方法
- ✅ 组件间的数据传递
- ✅ 组件的组合和复用
- ✅ Props 解构和默认值
- ✅ 组件设计的最佳实践
下一步
在下一节教程中，我们将学习：
- React 状态（State）管理
- 事件处理
- 组件的生命周期
继续学习，你将掌握 React 的核心概念！
练习建议: 尝试创建一个产品卡片组件，包含产品图片、名称、价格、描述等信息，并在应用中使用多个实例。