react多级组件间如何传递props

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;
相关推荐
汉得数字平台2 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹8 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录9 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界9 小时前
前端:优秀架构的坟墓
前端·架构