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;

原文地址：https://blog.csdn.net/Blablabla_/article/details/140344240

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！