react多级组件间如何传递props

小丸子yeah~2024-07-12 15:01

1.使用props属性一级级传递

针对父，子，孙子，如何实现将props从父级传递给孙子。

父：

javascript 复制代码

<ParentComponent parent={this} /> //传递this

子：

javascript 复制代码

<childComponent propsContext={this.props.parent} />

孙子：

javascript 复制代码

getProps() {
	return this.props.propsContext  //使用父组件传递来的props
}

2.使用API Context

使用 Context 可以更方便地跨多层级组件传递数据，而不需要手动逐层传递 props。

使用方法：

1）创建 Context

首先，需要在一个单独的文件中创建 Context 对象。

javascript 复制代码

// MyContext.js
import React from 'react';

const MyContext = React.createContext();
export default MyContext;

2）提供数据的组件

在一个父组件中使用 MyContext.Provider 提供数据。

javascript 复制代码

// ParentComponent.js
import React from 'react';
import MyContext from './MyContext';

class ParentComponent extends React.Component {
  render() {
    const someData = "Hello from Context";

    return (
      <MyContext.Provider value={someData}>
        {this.props.children}
      </MyContext.Provider>
    );
  }
}

export default ParentComponent;

3）接收数据的组件

这种方法只适用于单个 Context，并且只能在类组件中使用, 使用 contextType 可以让 this.context 直接获取到 Context 的值，但是这个类只能订阅一个 Context。

（如果有多个 Context 需要在同一个类组件中使用，可以通过多次使用 MyContext.Consumer 或者多个 contextType 静态属性来处理每个 Context 的值）

javascript 复制代码

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

class ChildComponent extends React.Component {
  static contextType = MyContext;

  render() {
    const value = this.context;

    return (
      <div>
        <p>{value}</p>
      </div>
    );
  }
}

export default ChildComponent;