父、子组件通信，助你提升 React 开发实力

2022-12-10 10:00:45

父子组件通信：React 进阶指南

父子组件通信 是构建交互式 React 应用程序的基础。了解子组件和父组件如何无缝传递数据，对构建响应性强的应用程序至关重要。

子组件向父组件传值

子组件通过 props（属性）向父组件发送数据。父组件在 render 函数中将数据传递给子组件，子组件可以通过 props 访问这些数据。

步骤：

在父组件中定义数据变量。
在父组件的 render 函数中，将数据作为 props 传递给子组件。
在子组件中，使用 props 属性访问父组件传递的数据。

// 父组件
class Parent extends React.Component {
  constructor() {
    this.state = { message: 'Hello' };
  }

  render() {
    return <Child message={this.state.message} />;
  }
}

// 子组件
class Child extends React.Component {
  render() {
    return <h1>{this.props.message}</h1>;
  }
}

父组件向子组件传值

父组件通过更新子组件的 state 来传递数据。父组件使用 setState() 函数更新 state，子组件通过 state 属性访问更新后的数据。

步骤：

在父组件中定义数据变量。
在父组件中，使用 setState() 函数更新子组件的 state。
在子组件中，使用 state 属性访问父组件传递的数据。

// 父组件
class Parent extends React.Component {
  constructor() {
    this.state = { message: 'Hello' };
  }

  handleClick() {
    this.setState({ message: 'Goodbye' });
  }

  render() {
    return (
      <>
        <button onClick={this.handleClick}>Change</button>
        <Child message={this.state.message} />
      </>
    );
  }
}

// 子组件
class Child extends React.Component {
  render() {
    return <h1>{this.props.message}</h1>;
  }
}

上下文 API

上下文 API 是一种更高级的父子组件通信方法。它允许子组件访问父组件中更高级别的 state 或功能，而无需逐层 props 传递。

步骤：

在顶层组件中创建上下文对象。
使用 Consumer 组件在子组件中访问上下文。

// 顶层组件
const MyContext = createContext();

function TopLevelComponent() {
  const state = 'Hello';

  return (
    <MyContext.Provider value={state}>
      {/* 子组件 */}
    </MyContext.Provider>
  );
}

// 子组件
const ChildComponent = () => {
  const state = useContext(MyContext);

  return <h1>{state}</h1>;
};