# Props（属性）传值
URL: https://caijiao.org/react/chapter4/props
Source: docs/react/chapter4/props.md
Description: Props 是 React 中用于在组件间传递数据的机制。通过 props，父组件可以将数据传递给子组件，从而实现组件间的通信。
在 React 中，组件是构建用户界面的基本单位。`props`（即“属性”）是 React 中用于组件之间传递数据的机制。父组件通过 `props` 向子组件传递数据，子组件可以通过 `props` 访问这些数据。
## 1. 什么是 Props？
`props` 是 React 组件的输入，它是由父组件传递给子组件的。`props` 是只读的，子组件不能修改从父组件传递过来的 `props`，而只能使用它们。
## 2. 如何传递 Props？
在父组件中，可以通过 JSX 属性来传递 `props`。子组件则通过 `props` 对象来接收这些数据。
### 2.1 父组件传递 Props
```jsx
import React from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
return ;
}
export default ParentComponent;
````
在这个例子中，父组件 `ParentComponent` 向子组件 `ChildComponent` 传递了两个 `props`：`name` 和 `age`。
### 2.2 子组件接收 Props
```jsx
import React from 'react';
function ChildComponent(props) {
return (
Name: {props.name}
Age: {props.age}
);
}
export default ChildComponent;
```
子组件通过 `props` 对象接收父组件传递的属性，并在 JSX 中使用它们。
## 3. 解构赋值语法
在子组件中，`props` 可以通过解构赋值的方式直接提取需要的属性，从而简化代码。
### 3.1 解构 Props
```jsx
import React from 'react';
function ChildComponent({ name, age }) {
return (
);
}
export default ChildComponent;
```
这种方式使得代码更加简洁，直接从 `props` 中解构出 `name` 和 `age`。
## 4. Props 的类型验证
React 提供了 `prop-types` 库来帮助开发者对组件的 `props` 进行类型验证，确保数据类型的正确性。
### 4.1 安装 `prop-types`
```bash
npm install prop-types
```
### 4.2 使用 `prop-types` 进行类型检查
```jsx
import React from 'react';
import PropTypes from 'prop-types';
function ChildComponent({ name, age }) {
return (
);
}
ChildComponent.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
};
export default ChildComponent;
```
通过 `propTypes`，你可以确保 `name` 是一个字符串且是必需的，`age` 是一个数字且是必需的。如果传递的 `props` 类型不符合预期，React 会在开发模式下发出警告。
## 5. 默认 Props 值
React 允许为组件的 `props` 设置默认值，当父组件没有传递该 `prop` 时，子组件会使用默认值。
### 5.1 设置默认 Props
```jsx
import React from 'react';
function ChildComponent({ name, age }) {
return (
);
}
ChildComponent.defaultProps = {
name: 'Anonymous',
age: 18,
};
export default ChildComponent;
```
在这个例子中，如果父组件没有传递 `name` 或 `age`，子组件会使用 `defaultProps` 中定义的默认值。
## 6. 通过 Props 实现组件间的通信
React 中的 `props` 机制允许父子组件进行数据传递，但不能实现子组件直接向父组件传递数据。要实现子组件向父组件传递数据，可以通过回调函数来完成。
### 6.1 父组件传递回调函数给子组件
```jsx
import React from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const handleDataFromChild = (data) => {
console.log('Data from child:', data);
};
return ;
}
export default ParentComponent;
```
### 6.2 子组件调用回调函数
```jsx
import React from 'react';
function ChildComponent({ onData }) {
const sendDataToParent = () => {
onData('Hello from child!');
};
return (
);
}
export default ChildComponent;
```
在这个例子中，父组件通过 `props` 向子组件传递了一个回调函数 `onData`，子组件通过该回调函数向父组件传递数据。
## 7. 总结
`props` 是 React 组件之间传递数据的关键机制。父组件通过 `props` 向子组件传递数据，子组件通过 `props` 使用这些数据。在使用 `props` 时，可以进行类型验证和设置默认值。通过 `props`，React 实现了组件间的单向数据流，保持了组件的高内聚性和低耦合性。