Props（属性）传值

在 React 中，组件是构建用户界面的基本单位。props（即“属性”）是 React 中用于组件之间传递数据的机制。父组件通过 props 向子组件传递数据，子组件可以通过 props 访问这些数据。

1. 什么是 Props？

props 是 React 组件的输入，它是由父组件传递给子组件的。props 是只读的，子组件不能修改从父组件传递过来的 props，而只能使用它们。

2. 如何传递 Props？

在父组件中，可以通过 JSX 属性来传递 props。子组件则通过 props 对象来接收这些数据。

2.1 父组件传递 Props

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  return <ChildComponent name="John" age={30} />;
}

export default ParentComponent;

在这个例子中，父组件 ParentComponent 向子组件 ChildComponent 传递了两个 props：name 和 age。

2.2 子组件接收 Props

import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
}

export default ChildComponent;

子组件通过 props 对象接收父组件传递的属性，并在 JSX 中使用它们。

3. 解构赋值语法

在子组件中，props 可以通过解构赋值的方式直接提取需要的属性，从而简化代码。

3.1 解构 Props

import React from 'react';

function ChildComponent({ name, age }) {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

export default ChildComponent;

这种方式使得代码更加简洁，直接从 props 中解构出 name 和 age。

4. Props 的类型验证

React 提供了 prop-types 库来帮助开发者对组件的 props 进行类型验证，确保数据类型的正确性。

4.1 安装 prop-types

npm install prop-types

4.2 使用 prop-types 进行类型检查

import React from 'react';
import PropTypes from 'prop-types';

function ChildComponent({ name, age }) {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

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

import React from 'react';

function ChildComponent({ name, age }) {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

ChildComponent.defaultProps = {
  name: 'Anonymous',
  age: 18,
};

export default ChildComponent;

在这个例子中，如果父组件没有传递 name 或 age，子组件会使用 defaultProps 中定义的默认值。

6. 通过 Props 实现组件间的通信

React 中的 props 机制允许父子组件进行数据传递，但不能实现子组件直接向父组件传递数据。要实现子组件向父组件传递数据，可以通过回调函数来完成。

6.1 父组件传递回调函数给子组件

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const handleDataFromChild = (data) => {
    console.log('Data from child:', data);
  };

  return <ChildComponent onData={handleDataFromChild} />;
}

export default ParentComponent;

6.2 子组件调用回调函数

import React from 'react';

function ChildComponent({ onData }) {
  const sendDataToParent = () => {
    onData('Hello from child!');
  };

  return (
    <div>
      <button onClick={sendDataToParent}>Send Data to Parent</button>
    </div>
  );
}

export default ChildComponent;

在这个例子中，父组件通过 props 向子组件传递了一个回调函数 onData，子组件通过该回调函数向父组件传递数据。

7. 总结

props 是 React 组件之间传递数据的关键机制。父组件通过 props 向子组件传递数据，子组件通过 props 使用这些数据。在使用 props 时，可以进行类型验证和设置默认值。通过 props，React 实现了组件间的单向数据流，保持了组件的高内聚性和低耦合性。