组件的传参

父与子通信

在react中，可以通过自定义属性传一个普通的字符串，还可以传一个方法

子与父通信的标准版流程:

①父定义一个有参数的方法

rcv:function(msg){}

②将此方法传递给子组件

③子组件来调用由参数方法，将数据传递到父组件

this.props.func(123)

varMyButton = React.createClass({

      handleClick:function(){

        this.props.func(10)

      },

      render:function(){

        return

        onClick={this.handleClick}>{this.props.btnText}      }

    })

    varMyCart = React.createClass({

      funcDel:function(index){

        alert('下标为'+index+'的商品删除成功')

      },

      funcSubmit:function(){

        alert('结算成功')

      },

      render:function(){

        return

    })

    ReactDOM.render(

      ,      document.getElementById('example')

    )

在子组件中

this.props.age获取数据

传方法

setAage = v =>this.setState({age:v})

<child age={this.state.age} setAge={this.setAge.bind(this)}>

在子组件使用

<h3 onClick={()=>this.props.setAge(15)}>

context

上下文传递参数

特点：引入的context 数据 是时时更新  当一个数据发生改变所有引用数据的视图都会自动更新

把根组件替换为

<Provider>

     <App/>

</Provider>

 在Provider中添加数据仓库

<Provider store={store}>

编写store仓库并导入仓库

编写store

 redux导入

 reducer 初始数据方法

上下文方式传递

1. 定义 上下文组件

import React from 'react'

let { Consumer, Provider } = React.createContext();

export { Consumer, Provider }

// 导出

子传父

redux react-redux 全局数据状态共享

安装

npm i redux react-redux

.从react-redux导入Provider