父传子:属性传值
原理:父级调用子级的时候,在子组件身上绑定一个属性,值为需要传递的数据。子组件中通过 this.props
来获取。
-
父组件的传递:
import React, { Component } from 'react' export default class Father extends Component { constructor() { super(); this.state = { msg:"父组件的msg" } } render() { return ( <div className="Father"> <h2>Father</h2> <Child msg={this.state.msg}></Child> </div> ) } }
-
子组件的接收
import React, { Component } from 'react' export default class Child extends Component { render() { return ( <div> <h2>Child</h2> <p>接收到父组件的值为:{this.props.msg}</p> </div> ) } }
子传父:事件传值
原理:还是父传子的原理,只不过父组件传递给子组件的不是数据,而是一个方法。子组件依然通过 this.props
调用。通过调用父组件传过来的方法,并传递参数的方式,把需要传递的值以父组件传来的方法的参数的形式传递给父组件。从而达到子传父的目的。
-
子组件传递:
import React, { Component, Fragment } from 'react' export default class Child extends Component { constructor() { super(); this.state = { msg: "子组件的msg" } } render() { return ( <div className="Child"> <h2>子组件</h2> {/* 点击按钮触发父组件传过来的函数 */} <button onClick={this.clickHandler.bind(this)}>给父级发送msg</button> </div> ) } clickHandler() { {/* 把需要传递给父组件的值当做参数传进去 */} this.props.getMsgHandler(this.state.msg) } }
-
父组件接收:
import React, { Component } from 'react' import Child from './Child.jsx' export default class Father extends Component { constructor() { super(); this.state = { msg: "" } } render() { return ( <div> <h2>Father</h2> {/* 父组件给子组件传递一个自身的函数,子组件通过调用函数的方式传值给父组件 */} <Child getMsgHandler={this.getMsgHandler.bind(this)}></Child> <p>接收到父组件的值为:{this.props.msg}</p> </div> ) } {/* 在传递的方法中,接收数据 */} getMsgHandler(val){ this.setState({ msg:val }) } }
跨组件传值
一、事件订阅传值
原理,给需要传值的双方绑定同一个事件总线,通过侦听和调用共同的方法,进行传值。
-
传递方:
import React, { Component } from 'react' import Observer from './observer' export default class Send extends Component { constructor() { super(); this.state = { msg:"发送方组件的msg" } } render() { return ( <div className="Send"> <h2>发送方</h2> <button onClick={this.sendMsgHandler.bind(this)}>给接收方发送msg</button> </div> ) } sendMsgHandler(){ {/* 通过抛发侦听好的handler事件来传递值 */} Observer.$emit('handler',this.state.msg) } }
-
接收方:
import React, { Component, Fragment } from 'react' import Observer from '../utils/observer' export default class One extends Component { constructor() { super(); this.state = { msg: null, }; this.bindEvent(); } bindEvent(){ {/* 侦听handler事件,以接收信息 */} Observer.$on("handler",this.getMsgHandler.bind(this)) } render() { return ( <div className="One"> <h2>接收方</h2> {/* 显示接收的值 */} <h4>{this.state.msg2}</h4> </div> ) } getMsgHandler(val){ {/* 来电回调,接收值 */} this.setState({ msg:val }) } }
-
observer事件订阅封装:
原理类似于
vue
中的$on
和$emit
const eventList = {} const $on = function(eventName,callback){ if(!eventList[eventName]){ eventList[eventName] = []; } eventList[eventName].push(callback); } const $emit = function(eventName,params){ if(eventList[eventName]){ var arr = eventList[eventName]; arr.forEach((cb)=>{ cb(params) }) } } const $off = function(eventName,callback){ if(eventList[eventName]){ if(callback){ var index = eventList[eventName].indexOf(callback); eventList[eventName].splice(index,1); }else{ eventList[eventName].length = 0; } } } export default { $on, $emit, $off }
二、Provider/Consumer传值
生产者(Provider)/消费者(Consumer) 传值。
其中,生产者(Provider)是父级,消费者(Consumer)是子级。
…
待更新
三、Redux
…
待更新