React Props

学习props传值 · 难度：入门 · +10XP

React Props 组件传参

Props（Properties 的缩写）是 React 组件之间传递数据的核心机制。父组件通过 Props 将数据向下传递给子组件，子组件通过 props 参数接收这些数据。Props 是只读的，子组件不能修改接收到的 Props，这保证了数据流的单向性和可预测性。

Props 的基本用法

Props 的传递方式类似于 HTML 属性。父组件在 JSX 中为子组件添加自定义属性，子组件通过 props.属性名 或解构赋值来访问这些值。Props 可以传递任何 JavaScript 数据类型：字符串、数字、布尔值、数组、对象，甚至是函数（事件处理）。

// 父组件
function App() {
  return (
    <div>
      <Greeting name="小明" age={18} isStudent={true} />
      <Greeting name="小红" age={25} isStudent={false} />
    </div>
  );
}
// 子组件 - 使用解构赋值接收 Props
function Greeting({ name, age, isStudent }) {
  return (
    <div className="card">
      <h3>你好，{name}！</h3>
      <p>年龄: {age}</p>
      <p>身份: {isStudent ? '学生' : '职场人'}</p>
    </div>
  );
}

Props 类型验证（PropTypes）

为了确保组件接收到正确类型的 Props，React 提供了 PropTypes 库（React v15.5+ 需要单独安装 prop-types 包）。通过定义 PropTypes，你可以在开发阶段及时发现类型错误。

import PropTypes from 'prop-types';
function ProductCard({ title, price, onSale }) { /* ... */ }
ProductCard.propTypes = {
  title: PropTypes.string.isRequired,
  price: PropTypes.number.isRequired,
  onSale: PropTypes.bool,
};
ProductCard.defaultProps = {
  onSale: false,
};

props.children 与组合

// children 模式
function Card({ title, children }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="card-body">{children}</div>
    </div>
  );
}
// 使用
<Card title="公告">
  <p>今天下午 3 点开会。</p>
</Card>

1. 创建 Parent 和 Child 两个组件，Parent 通过 Props 传递 3 个不同类型的属性给 Child
2. 为 Child 组件添加 PropTypes 验证和 defaultProps 默认值
3. 创建一个 Card 组件，使用 children 模式实现内容插槽
4. 在父组件中维护一个用户数据对象，通过展开运算符传递给子组件
5. 将一个事件处理函数作为 Props 传递给子组件，实现子组件调用父组件方法