React跨组件传值

React跨组件传值

React跨组件传值运用的是提供者与消费的概念来创建的 ,借助react中的对象context来实现，这个对象里面默认有个属性Provider,ConsumerProvider 是提供数据，一般写在入口组件，
Consumer 是消费数据

接下来是用法
首先创建一个文件作为存储数据的仓库glabol.js

import React from 'react'
//导出对象 因为React.createContext()里面有两个属性Provider，Consumer所以需要导出
export const globalContext = React.createContext();
// 导出仓库里面存放一些普通数据，跟vuex的含义差不多
export const globalData = {
  num: 0,
  sum: ['a','b','c']
}
//self在后面会传个参数this去替代，这里有一点我也还没弄清楚那就是正常的是接个箭头函数，但是你会发现在箭头函数的函数体部分多了括号，不加就会出错，有时间就自己去研究

//导出仓库的方法
export const globalActions = self => ({
  add() {
    //给数字+1
    self.setState(state => ({
      num: state.num + 1
    }))
  }
})

第二步，在入口文件app.js文件下面引入

import Asign from './view/asign' //子组件
import './App.css';
import React, { Component } from 'react'
import { globalContext, globalData,globalActions } from './global';//引入'数据'，'方法','跟默认的两个属性'

// react context 提供者和消费者的概念创建的
const { Provider } = globalContext  //定义Provider组件
export default class App extends Component {
  constructor(props) {  //这里借助构造函数
    super(props)
    this.state={    //这里我把仓库的所有数据都拿出来当作state
      ...globalData,    //结构数据
      ...globalActions(this) //结构方法 将this传过去
    }
  }
  render() {
    return (
      <Provider value={this.state}>  //Provider组件中有个value值，value值就是最外层组件的数据，这里把仓库所有的数据都绑定上去，而我在这里是把整个仓库也就是state当作value值，提供数据
        <div className="App">
          <header className="App-header">
            <Asign></Asign>
          </header>
        </div >
      </Provider>
    );
  }
}

第三步在下面的第N级的组件使用

import React, { Component } from 'react'
import { globalContext } from '../global'  //导入context中有一个消费数据的组件Consumer
//这里我提供两种方法接受仓库数据
//第一种比较好用也是我比较常用的
//react组件里面有个属性contextType可以获取到当前组件所有的数据   组件名.contextType=globalContext
//然后使用this.context.属性 获取内容
export default class home extends Component {
  add1 = () => {
    console.log(this);
    this.context.add() //所有数据方法都存在this.context
  }
  render() {
    return (
      <div>
        <button onClick={this.add1}>+1</button>
        {this.context.num}
      </div>
    )
  }
}
home.contextType = globalContext  //消费数据

//第二种方法就是使用消费数据的组件Consumer
import React, { Component } from 'react'
import { globalContext } from '../global'
const { Consumer } = globalContext //上面导入部分不过多解释，这里调用默认属性Consumer
export default class home extends Component {
  render() {
    return (
      <div>
      //一个Consumer只能包裹一个标签，嵌套的话没有去深入研究 一般不用这种写法，有兴趣自己去研究，另外Consumer里面包裹的是一个方法直接写入value.num是会报错的，当然可以使用jsx语法
        <Consumer>{value =><button onClick={value.add}>+1</button>}</Consumer>
        <Consumer>{value => value.num}</Consumer>
      </div>
    )
  }
}

以上就是react的跨组件传值 有啥不懂得可以在下方留言