React Props – BuildCodePro

React Props知识点详解

编程小白的React Props入门指南

什么是Props？

Props（属性）是React中组件之间传递数据的主要方式。

就像给函数传递参数一样，给组件传递信息

父组件向子组件”投喂”数据的方式

组件接收外部信息的”输入接口”

// 父组件传递Props
<ChildComponent name=”小明” age={18} />

// 子组件接收Props
function ChildComponent(props) {
return <div>姓名: {props.name}, 年龄: {props.age}</div>
}

Props的特点

只读性：组件不能修改自己的Props

单向数据流：数据从父组件流向子组件

任意类型：可传递字符串、数字、数组、对象、函数等

可组合性：多个组件通过Props组合使用

重要原则：Props是只读的！组件不能修改接收到的Props，只能使用它们。

如何使用Props

在函数组件中，通过函数参数接收Props：

function Welcome(props) {
return <h1>你好, {props.name}</h1>;
}

在类组件中，通过this.props访问：

class Welcome extends React.Component {
  render() {
    return <h1>你好, {this.props.name}</h1>;
  }
}

解构技巧：可以使用解构语法直接获取属性
function Welcome({ name }) {
return <h1>你好, {name}</h1>;
}

默认Props

当父组件没有传递某个Prop时，可以设置默认值

// 函数组件
function Welcome(props) {
return <h1>你好, {props.name}</h1>;
}

Welcome.defaultProps = {
name: ‘访客’ // 默认值
};

// 类组件
class Welcome extends React.Component {
  static defaultProps = {
    name: ‘访客’
  }
  render() { … }
}

使用场景：当某个属性可能不会传递时，设置默认值可以防止出错

子组件向父组件通信

通过传递函数类型的Props实现”子传父”

// 父组件定义函数并传递给子组件
function Parent() {
  const handleChildEvent = (data) => {
    console.log(‘收到子组件数据:’, data);
  }
  return <Child onEvent={handleChildEvent} />
}

// 子组件调用父组件传递的函数
function Child(props) {
  const sendData = () => {
    props.onEvent(‘来自子组件的数据’);
  }
  return <button onClick={sendData}>发送数据</button>
}

注意：这是React中实现组件通信的基本模式

Props类型检查

使用PropTypes检查传入的Props是否符合要求

import PropTypes from ‘prop-types’;

function User({ name, age }) { … }

User.propTypes = {
  name: PropTypes.string.isRequired, // 必须为字符串
  age: PropTypes.number, // 必须为数字
  hobbies: PropTypes.arrayOf(PropTypes.string), // 字符串数组
  onClick: PropTypes.func // 函数类型
};

好处：

及早发现属性传递错误
作为组件使用的文档说明
提高代码可维护性

特殊属性：children

children是一个特殊的Prop，表示组件的嵌套内容

// 父组件使用
<Container>
<div>这是子内容</div>
</Container>

// 子组件接收
function Container(props) {
return <div className=”container”>{props.children}</div>
}

children可以是：

普通文本
JSX元素
组件
函数（渲染属性模式）

展开运算符传递Props

使用ES6展开运算符…批量传递属性

const user = {
  name: ‘小明’,
  age: 20,
  gender: ‘男’
};

// 等价于 <User name=”小明” age={20} gender=”男” />
<User {…user} />

使用场景：

传递多个属性时简化代码
高阶组件中透传Props

Props与State的区别

特性	Props	State
定义者	父组件传递	组件自身创建
可变性	只读（不可修改）	可修改（使用setState）
作用范围	组件之间传递数据	组件内部状态管理
更新触发	父组件重新渲染时	调用setState方法时
初始化	通过父组件传递	在constructor中初始化
使用场景	配置组件、传递数据	处理用户交互、数据变化

简单记忆：

Props = 外部传入的数据（不可变）
State = 内部管理的状态（可变）
当组件需要改变数据时，应该使用State

什么是Props？

Props的特点

如何使用Props

默认Props

子组件向父组件通信

Props类型检查

特殊属性：children

展开运算符传递Props

Props与State的区别

发表评论 取消回复

发表评论取消回复