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;
相关推荐
beelan1 分钟前
v-on的思考
前端
山河木马4 分钟前
前端学习C++之:.h(.hpp)与.cpp文件
前端·javascript·c++
用户9272472502194 分钟前
PHP + CSS + JS + JSON 数据采集与展示系统,支持伪静态
前端
努力只为躺平8 分钟前
一文搞懂 Promise 并发控制:批量执行 vs 最大并发数,实用场景全解析!
前端·javascript
Web小助手10 分钟前
大保剑:Promise的有趣体验
javascript
李大玄11 分钟前
Google浏览器拓展工具 "GU"->google Utils
前端·javascript·github
爱编程的喵11 分钟前
从DOM0到事件委托:揭秘JavaScript事件机制的性能密码
前端·javascript·dom
蓝倾16 分钟前
京东批量获取商品SKU操作指南
前端·后端·api
JSLove23 分钟前
常见 npm 报错问题
前端·npm
sunbyte23 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss