React 属性 Props(组件传参)
在上一节中,你已经接触过组件的基本写法,并用 props
向组件传递数据。现在,让我们更深入地理解 props 的工作机制,学会如何在组件之间灵活地传参。
在 React 中,组件之间的数据传递主要依赖 props
(属性)。你可以把 props 理解为函数参数,它们由父组件传递给子组件,帮助你构建灵活、可配置的 UI 模块。本章将带你全面掌握 props 的用法,包括传递字符串、数字、对象、函数、默认值,以及 props 的只读性等重要概念。
什么是 Props?
props
是 “properties”(属性) 的缩写,是组件的输入。你可以通过在组件标签中添加属性的方式,将数据传入子组件:
function Welcome(props) {
return <h1>你好,{props.name}!</h1>;
}
function App() {
return <Welcome name="小明" />;
}
等价于函数参数:
function Welcome({ name }) {
return <h1>你好,{name}!</h1>;
}
传递各种类型的值
你可以向组件传递任何类型的数据,只要用花括号包裹非字符串内容。
字符串
<Hello message="你好" />
数字 / 布尔值
<User age={18} isStudent={true} />
对象 / 数组
<Person info={{ name: '张三', age: 20 }} />
<List items={['香蕉', '苹果', '橘子']} />
函数
<Button onClick={() => alert('点击了按钮!')} />
组件中使用 props
在组件内部,通过访问 props
或解构来使用传入的属性:
function UserCard({ name, age }) {
return (
<div>
<p>姓名:{name}</p>
<p>年龄:{age}</p>
</div>
);
}
调用:
<UserCard name="小明" age={18} />
props 是只读的
React 中的 props 是不可变的(immutable),你不能在子组件中修改它。
// 错误示例(不要这么做)
props.name = '李四'; // ❌ 会报错或导致不可预测的行为
如果你需要更改数据,应该通过父组件管理 state,再通过 props 传递更新后的值。
props.children:组件嵌套内容
React 提供了一个特殊的属性 props.children
,用于表示组件标签内部嵌套的内容。你可以把它理解为 HTML 标签的“内部内容”。
function Wrapper(props) {
return <div className="box">{props.children}</div>;
}
function App() {
return (
<Wrapper>
<h1>标题</h1>
<p>这是正文。</p>
</Wrapper>
);
}
在这个例子中,<Wrapper>
组件接收到的 props.children
就是:
[
<h1>标题</h1>
<p>这是正文。</p>
]
任何你写在组件标签内部的内容,都会自动变成该组件的 props.children
,由组件内部决定如何渲染它。
设置默认 props 值(defaultProps)
如果某个 prop 没有传入,你可以为它指定默认值。
例如,在函数组件中设置默认值:
function Welcome({ name = 'React 用户' }) {
return <h1>你好,{name}!</h1>;
}
类组件中也可以使用 defaultProps
:
class Welcome extends React.Component {
static defaultProps = {
name: 'React 用户'
};
render() {
return <h1>你好,{this.props.name}</h1>;
}
}
props 类型校验
你可以使用 prop-types
包来校验 props 类型(在学习 TypeScript 前,它很有用)。
安装方法:
npm install prop-types
使用示例:
import PropTypes from 'prop-types';
function Greeting({ name }) {
return <p>你好,{name}</p>;
}
Greeting.propTypes = {
name: PropTypes.string.isRequired
};
如果你使用的是 TypeScript,推荐方式是使用接口(interface)或类型别名(type)对 props 进行静态类型检查。例如:
import React from 'react';
// 定义 props 类型
interface WelcomeProps {
name: string;
age?: number; // 可选属性
}
// 使用泛型指定 props 类型
function Welcome(props: WelcomeProps) {
return (
<div>
<h1>你好,{props.name}!</h1>
{props.age && <p>你今年 {props.age} 岁。</p>}
</div>
);
}
export default Welcome;
使用组件:
<Welcome name="小明" age={18} />
说明:
interface
或type
定义的是静态类型,开发时会有更好的提示和校验。- 使用
age?: number
表示这是一个可选的 prop。 - 和 JavaScript 不同,TypeScript 不再推荐使用
PropTypes
,因为 TypeScript 本身已经能提供更强大的类型检查。
小结
props 是 React 组件之间通信的桥梁,就像函数参数一样,帮助你构建灵活、可复用的组件。通过 props,你可以向组件传递各种类型的数据,包括文本、数字、对象、函数,甚至嵌套的子元素。掌握 props 后,你的组件就像乐高积木一样,可以随心组合,为后续学习状态(state)管理和组件交互打下坚实基础。