React跨级传参
跨级组件传参的好处
例如:react-redux 的原理就是利用了跨级传参的方法实现的,其中的好处不言而喻!!!
为什么要用跨级传参
在单纯的父子传参中this.props就可以了。子传父也是通过调用父组件的方法去改变参数变化,假如在企业项目中不
只是单纯的父子传参,还有爷爷组件和孙子组件或者重孙玄孙甚至可能...玄玄玄孙等等,就好比自己的亲戚的七大姑八
大姨一样错综复杂,所以这时候React提供了一个非常简便和实用的东西 --------- 组件跨级传值
具体使用方法
- 首先先下载下React脚手架,并搭建好目录结构
- 第一步在src文件夹下创建utils文件夹并创建context.js文件,以及其他组件
- 在context文件下书写一下代码(用来创建Context)
import React from 'react'
//创建context对象
var context = React.createContext();
//导出
export default context;
- 在App文件里书写爷爷组件App 并在爷爷组件中引入 父亲组件List
class App extends Component{
constructor(){
super();
this.state = {
title:'支付宝'
};
}
render(){
return (
<div className="app">
{/* 通过value属性指定需要传递的值 */}
{/* 希望接收值的组件 必须包裹在Provider内部 */}
<Context.Provider value={this.state.title}>
<List></List>
</Context.Provider>
</div>
)
}
}
export default App;
- 在List文件里书写父亲组件List 并在爷爷组件中引入 孙子组件Item
import React, { Component } from 'react'
import Item from './Item'
export default class List extends Component {
render() {
return (
<div>
<Item></Item>
</div>
)
}
}
- 孙组件Item
import React, { Component } from 'react'
import Context from '../utils/context'
export default class Item extends Component {
render() {
return (
<div className="item">
<Context.Consumer>
{
(value) => {
console.log('Item接收到了值:', value);
/* 不能在这里用setState保存接收的value */
/* 否则会死循环 */
/* 对于接收到value,一般的处理方式: 立即渲染 */
return (
<h2>{value}</h2>
);
}
}
</Context.Consumer>
</div>
)
}
}
- 孙组件进行数据的展示和渲染
import React, { Component } from 'react'
import Context from '../utils/context'
export default class Btn extends Component {
render() {
return (
<div className="btn">
<Context.Consumer>
{
(value) => {
console.log('Btn接收到了值:', value);
/* 不能在这里用setState保存接收的value */
/* 否则会死循环 */
/* 对于接收到value,一般的处理方式: 立即渲染 */
return (
<h2>{value}</h2>
);
}
}
</Context.Consumer>
</div>
)
}
这样就是实现了跨级传参
总结
- 创建context对象
var context = React.createContext();
- 传值的组件,利用 Provider 组件传值,值通过value属性指定;
注意: 须将需要接收值的组件包裹在Provider内,这样所有内层组件都可以接收到这个value值,通俗的讲就是数据的入口。
<Context.Provider value={this.state.title}></Context.Provider>
- 接收值的组件,利用Consumer 组件接收值,内部是个函数
<Context.Consumer>
{
(value) => {
console.log('Btn接收到了值:', value);
/* 不能在这里用setState保存接收的value */
/* 否则会死循环 */
/* 对于接收到value,一般的处理方式: 立即渲染 */
return (
<h2>{value}</h2>
);
}
}
</Context.Consumer>