当前位置：首页 > news >正文

2026最新React教程（四）React组件属性——Props的使用

news 2026/3/26 20:39:13

前言

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;