跳到主要内容

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} />

说明:

  • interfacetype 定义的是静态类型,开发时会有更好的提示和校验。
  • 使用 age?: number 表示这是一个可选的 prop。
  • 和 JavaScript 不同,TypeScript 不再推荐使用 PropTypes,因为 TypeScript 本身已经能提供更强大的类型检查。

小结

props 是 React 组件之间通信的桥梁,就像函数参数一样,帮助你构建灵活、可复用的组件。通过 props,你可以向组件传递各种类型的数据,包括文本、数字、对象、函数,甚至嵌套的子元素。掌握 props 后,你的组件就像乐高积木一样,可以随心组合,为后续学习状态(state)管理和组件交互打下坚实基础。