一文读懂组件通讯之父传子

2024-02-03 00:52:22

父传子：掌握 React 组件通讯的艺术

简介

React 作为一款强大的前端框架，提供了丰富的组件通讯机制，其中最常见的方式之一便是父传子。通过这种方式，父组件可以向其子组件传递数据，从而实现组件之间的交互和信息共享。本文将深入探讨父传子的三种主要方式：props 传递数据、函数传递数据和 ref 传递数据。

一、Props 传递数据

1.1 Props 的定义和使用

Props（properties 的缩写）是 React 组件的属性对象，用于传递父组件的数据给子组件。它是一个只读对象，子组件无法直接修改，只能通过父组件来更新。

// 父组件
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const data = { name: 'John', age: 30 };

  return (
    <div>
      <ChildComponent data={data} />
    </div>
  );
};

// 子组件
const ChildComponent = (props) => {
  const { data } = props;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.age}</p>
    </div>
  );
};

1.2 Props 的类型检查

为了确保子组件接收到的数据类型正确，React 提供了类型检查机制，可以通过 TypeScript 或 PropTypes 库来实现。

二、函数传递数据

2.1 函数传递数据的原理

函数传递数据与 props 传递数据类似，不同之处在于，函数作为参数传递给子组件，然后子组件调用该函数获取数据。

// 父组件
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const getData = () => {
    return { name: 'Jane', age: 25 };
  };

  return (
    <div>
      <ChildComponent getData={getData} />
    </div>
  );
};

// 子组件
const ChildComponent = (props) => {
  const { getData } = props;

  const data = getData();

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.age}</p>
    </div>
  );
};

2.2 函数传递数据的优点

相较于 props 传递数据，函数传递数据更灵活，可以传递复杂的数据结构，如函数或对象，同时也能防止子组件直接修改数据，提高安全性。

三、Ref 传递数据

3.1 Ref 的定义和使用

Ref（references 的缩写）是 React 组件的引用对象，用于获取子组件的实例。通过 ref，父组件可以直接访问子组件的属性和方法。

// 父组件
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const childRef = React.createRef();

  return (
    <div>
      <ChildComponent ref={childRef} />
    </div>
  );
};

// 子组件
const ChildComponent = (props) => {
  return (
    <div>
      <h1>子组件</h1>
      <button onClick={() => {
        console.log(childRef.current.state.data);
      }}>获取子组件数据</button>
    </div>
  );
};