react多级组件间如何传递props

1.使用props属性一级级传递
针对父，子，孙子，如何实现将props从父级传递给孙子。
父：

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

子：

<childComponent propsContext={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 (<MyContext.Provider value={someData}>{this.props.children}</MyContext.Provider>);}
}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 (<div><p>{value}</p></div>);}
}export default ChildComponent;