react多级组件间如何传递props

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

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

父：

this} / //传递this

子：

this.props.parent} /

孙子：

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

2.使用API Context

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

使用方法：

1）创建 Context

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

// MyContext.js
import React from 'react';
const MyContext = React.createContext();
export default MyContext;

2）提供数据的组件

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

// ParentComponent.js
import React from 'react';
import MyContext from './MyContext';
class ParentComponent extends React.Component {
  render() {
    const someData = "Hello from Context";
    return (
      someData}
        {this.props.children}
      
    );
  }
}
export default ParentComponent;

3）接收数据的组件

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

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

import React from 'react';
import MyContext from './MyContext';
class ChildComponent extends React.Component {
  static contextType = MyContext;
  render() {
    const value = this.context;
    return (
      

        
{value}
      
    );
  }
}
export default ChildComponent;