zoukankan      html  css  js  c++  java
  • react组件间的通信父子通信,子父通信,兄弟通信

    react组件间的通信

    父子通信

    父组件可以将自己的状态通过属性的方式传递给子组件,然后子组件通过props获取到传递来的属性。

    father.js父组件中

    render() {
            let {list} =this.state;
            return (
                <div>
                    <List list={list}/>
                </div>
            )
        }

    son.js子组件中

    render() {
        //接收到父组件传过来的数据
            let {list} =this.props;
            return(
                <div>
                    {
                        list.map((item,index)=>{
                        return <li key={index}>{item}</li>
                        })
                    }
                </div>
            )
        }
    子父通信

    父组件可以将一个更改自身状态的方法传递给子组件,然后子组件通过props接受后进行调用,相当于父组件的方法被执行了,从而更改了自身的状态。

    父组件中想要获取到子组件input输入的数据

    父组件中的代码

    render() {
            let {list} =this.state;
            return (
                <div>
                    <Input add={this.add}/>
                </div>
            )
        }

    子组件中的代码

    //定义一个函数,当按下enter键时,调用子组件传递过来的add方法
    down=(e)=>{
            if(e.keyCode===13){
                this.props.add(e.target.value)
            }
    
        }
    
        render() {
            return (
                <div>
                    <input onKeyUp={this.down}/>
                </div>
            )
        }
    兄弟组件通信

    兄弟组件通信

    主要思想就是发布事件(on 监听)和订阅事件(trigger 触发)。

    创建event-Hub.js 在组件a和b中引入

    event-Hub.js

    let callbackLists = {}
    let eventHub = {
        trigger(eventName, data) {
            let callbackList = callbackLists[eventName]
            if (!callbackList) {
                return
            }
            for (let i = 0; i < callbackList.length; i++) {
                callbackList[i](data)
            }
        },
        on(eventName, callback) {
            if (!callbackLists[eventName]) {
                callbackLists[eventName] = []
            }
            callbackLists[eventName].push(callback)
        }
    }
    
    export default eventHub

    组件a中

    down=()=>{
            EventHub.trigger("bianse","yellow")
        }
        render() {
            return (
                <div>
                    <button onClick={this.down}>点击</button>
                </div>
            )
        }

    组件b中

    state={
            color:'red'
        }
        componentDidMount(){
            //接收子组件穿过类的颜色值
            EventHub.on("bianse",color=>{
                this.setState({
                    color
                })
            })
        }
        render() {
            return (
                <div>
                    <span style={{color:this.state.color}}>文本</span>
                </div>
            )
        }
    请用今天的努力,让明天没有遗憾。
  • 相关阅读:
    poj 1579(动态规划初探之记忆化搜索)
    hdu 1133(卡特兰数变形)
    CodeForces 625A Guest From the Past
    CodeForces 625D Finals in arithmetic
    CDOJ 1268 Open the lightings
    HDU 4008 Parent and son
    HDU 4044 GeoDefense
    HDU 4169 UVALive 5741 Wealthy Family
    HDU 3452 Bonsai
    HDU 3586 Information Disturbing
  • 原文地址:https://www.cnblogs.com/cupid10/p/15617675.html
Copyright © 2011-2022 走看看