前言
Props是实现React组件间数据传递的核心机制，也是组件实现动态化、复用性的关键。通过Props，父组件可向子组件传递任意类型的数据，让相同结构的组件能渲染不同内容。本文将系统讲解Props的使用规则、只读特性、默认值设置及类型校验，掌握组件数据传递的核心逻辑。
1. Props的核心作用与传递规则
Props（Properties的缩写）的核心作用是实现组件间的数据传递，主要用于父组件向子组件传递数据，是组件通信最基础的方式。其核心传递规则如下：
- Props以“属性”形式添加在组件标签上，语法与HTML属性类似；
- 可传递任意类型的数据：字符串、数字、布尔值、数组、对象、函数等；
- 传递多个Props时，以空格分隔，无顺序要求。
基础传递示例
// 子组件：接收Props并渲染 const Card = (props) => { return ( <div style={{ border: '1px solid #ccc', padding: '20px', borderRadius: '8px' }}> <h3>{props.title}</h3> <p>{props.content}</p> <p>阅读量：{props.readCount}</p> <p>是否推荐：{props.isRecommend ? '是' : '否'}</p> </div> ); }; // 父组件：向子组件传递Props function App() { // 定义要传递的数据 const cardData = { content: 'Props是组件通信的核心方式' }; return ( <div> {/* 传递不同类型的Props */} <Card title="React Props学习" // 字符串类型（可省略引号，直接写值） readCount={100} // 数字类型（必须用{}包裹） isRecommend={true} // 布尔类型（必须用{}包裹） content={cardData.content} // 引用变量 /> </div> ); } export default App;关键注意点
- 传递字符串时，可直接写值（如
title="React Props学习"）； - 传递非字符串类型（数字、布尔、数组、对象等），必须用
{}包裹； - 布尔值的特殊写法：仅写属性名（如
<Card isRecommend />）等价于isRecommend={true}。
2. 函数组件接收和使用Props的方式
函数组件接收Props的核心方式是将其作为函数的唯一参数，常用两种使用形式：直接使用props对象、解构赋值（更简洁）。
方式1：直接使用props对象
props是一个对象，包含所有父组件传递的属性，通过props.属性名访问，适合Props数量较少的场景。
const Button = (props) => { return ( <button style={{ padding: '8px 16px', backgroundColor: props.bgColor, color: props.textColor }} > {props.text} </button> ); }; function App() { return ( <Button text="提交按钮" bgColor="#007bff" textColor="#fff" /> ); }方式2：解构赋值（推荐）
直接解构props对象，可在函数参数位置解构，也可在函数内部解构，代码更简洁，可读性更高。
// 方式2.1：参数位置解构 const Button = ({ text, bgColor, textColor }) => { return ( <button style={{ padding: '8px 16px', backgroundColor: bgColor, color: textColor }} > {text} </button> ); }; // 方式2.2：函数内部解构 const Card = (props) => { const { title, content, readCount } = props; return ( <div> <h3>{title}</h3> <p>{content}</p> <p>{readCount}</p> </div> ); }; function App() { return ( <div> <Button text="删除按钮" bgColor="#dc3545" textColor="#fff" /> <Card title="解构赋值示例" content="简化Props使用" readCount={50} /> </div> ); }3. Props的只读特性与使用原则
React规定：Props是只读的，子组件不能修改父组件传递的Props，这是React的核心设计原则之一（单向数据流）。
只读特性示例（错误与正确写法）
// 错误写法：尝试修改Props（会报错） const Button = (props) => { // 禁止修改Props props.text = '修改后的文本'; return <button>{props.text}</button>; }; // 正确写法：如需修改，基于Props创建新变量 const Button = (props) => { // 基于Props创建新变量，可修改新变量 let newText = props.text; if (props.isDisabled) { newText = '不可点击'; } return <button disabled={props.isDisabled}>{newText}</button>; }; function App() { return <Button text="正常按钮" isDisabled={true} />; }单向数据流原则
Props的传递方向是“父→子”，子组件仅能读取Props，若需修改数据，需由父组件更新数据后重新传递，这种单向数据流让组件间的数据流向清晰，便于追踪数据变化和排查问题。
4. Props默认值的设置方法
当父组件未传递某个Props时，可通过设置默认值避免渲染异常，常用两种设置方式：函数参数默认值、Object.defaultProps（旧写法，不推荐）。
方式1：函数参数默认值（推荐）
结合解构赋值设置默认值，语法简洁，符合ES6规范。
// 解构时直接设置默认值 const Button = ({ text = '默认按钮', bgColor = '#6c757d', textColor = '#fff' }) => { return ( <button style={{ padding: '8px 16px', backgroundColor: bgColor, color: textColor }}> {text} </button> ); }; function App() { // 未传递text和bgColor，使用默认值 return <Button />; }方式2：defaultProps（旧写法）
适用于未使用解构赋值的场景，React 18仍支持，但推荐使用参数默认值。
const Card = (props) => { return ( <div> <h3>{props.title}</h3> <p>{props.content}</p> </div> ); }; // 设置默认Props Card.defaultProps = { title: '默认标题', content: '默认内容' }; function App() { return <Card />; }5. Props类型校验基础
在开发中，若传递的Props类型错误（如预期数字却传递字符串），可能导致组件渲染异常，可通过prop-types库校验Props类型，提前发现错误。
实现步骤
- 安装prop-types库：
npminstallprop-types --save# 或yarnaddprop-types- 使用prop-types校验Props类型：
import PropTypes from 'prop-types'; const Card = ({ title, content, readCount, isRecommend }) => { return ( <div style={{ border: '1px solid #ccc', padding: '20px' }}> <h3>{title}</h3> <p>{content}</p> <p>阅读量：{readCount}</p> <p>推荐：{isRecommend ? '是' : '否'}</p> </div> ); }; // 定义Props类型校验规则 Card.propTypes = { title: PropTypes.string.isRequired, // 字符串类型，且必须传递 content: PropTypes.string, // 字符串类型，非必须 readCount: PropTypes.number, // 数字类型 isRecommend: PropTypes.bool // 布尔类型 }; // 结合默认值使用 Card.defaultProps = { content: '暂无内容', readCount: 0, isRecommend: false }; function App() { // 错误示例：readCount传递字符串（控制台会警告） // return <Card title="类型校验" readCount="100" />; // 正确示例 return <Card title="类型校验" readCount={100} />; } export default App;常用校验类型
PropTypes.string：字符串PropTypes.number：数字PropTypes.bool：布尔值PropTypes.array：数组PropTypes.object：对象PropTypes.func：函数PropTypes.node：可渲染节点（JSX、字符串、数字等）PropTypes.element：React元素.isRequired：标记为必须传递的属性
总结
- Props是父组件向子组件传递数据的核心方式，可传递任意类型数据，非字符串类型需用
{}包裹； - 函数组件可通过解构赋值简化Props使用，Props具有只读特性，遵循单向数据流原则；
- 可通过参数默认值设置Props默认值，使用
prop-types库校验Props类型，提升代码健壮性。
)
