zoukankan      html  css  js  c++  java
  • react 父子组件传值 兄弟组件传值

    一、子向父组件传值

    方法一:
    父组件
        //方法
        parentFn(data1, data2, e) {
            // 按照参数排列 最后一个是event
            console.log(data1, data2, e) //输出 1  2  event内容
        }
        //渲染
        render() {
            return (<Fragment>
                 //子组件
                <SideContent childFn={this.parentFn.bind(this)}></SideContent>
            </Fragment>)
        }
    子组件
        // 渲染
        render() {
            return (
                <div style={{  '100vh' }}>
                    //可以直接获取props调用 也可以重新定义在方法中调用
                    <div onClick={this.props.childFn.bind(this,'1','2')}>
                        子组件
                    </div>
                </div>
            );
        }
    

      

    方法二:
        参考 通过ref获取子组件的值   可以看 `二、子组件向父组件传方法二` 一样的意思
    

     

    二、子组件向父组件传方法

    方法一:传值绑定this
    父组件
        //父 - 点击调用 子 
        clickChild = (e) => {
            this.child.myChild()
        }
        //渲染
        render() {
            return (<Fragment>
                //子组件
                <SideContent onRef={(ref)=>{this.child = ref}} }></SideContent>
                //点击调用
                <button onClick={this.clickChild} >click</button>
            </Fragment>)
        }
    子组件
        //周期
        componentDidMount() {
            this.props.onRef(this)
        }
        //给父组件用的方法
        myChild = () => log('父调子fn')
        // 渲染
        render() {
            return (
                <div>
                    子组件
                </div>
            );
        }
    

      

    方法二:直接绑定ref
    父组件
        //父 - 点击调用 子 
        clickChild = (e) => {
            this.refs.SideContent.myChild();
        }
        //渲染
        render() {
            return (<Fragment>
                //子组件
                <SideContent ref="SideContent" }></SideContent>
                //点击调用
                <button onClick={this.clickChild} >click</button>
            </Fragment>)
        }
    子组件
        //给父组件用的方法
        myChild = () => log('父调子fn')
        // 渲染
        render() {
            return (
                <div>
                    子组件
                </div>
            );
        }
    

      

     

    三、父向子传值

    父组件
        //渲染
        render() {
            return (<Fragment>
                //子组件
                <SideContent name="chenyiyi" }></SideContent>
            </Fragment>)
        }
    子组件
        // 渲染
        render() {
            return (
                <div>
                    子组件 {this.props.name}
                </div>
            );
        }
    

      

     

    四、父向子传方法

    参考 `一、子向父组件传值方法一`  一样的  传个方法过去 子组件调用了 就是掉了父的方法了 
    

    五、兄弟组件传值 / 各种组件传值 封装的像vue的Bus中央事件总线 及其优秀

    有兴趣的可以看一下 https://www.cnblogs.com/chen-yi-yi/p/11152391.html vue的bus传值
    
    记得两个组件中 都需要引入js 使用方法如下
    传值
        eventProxy.trigger('名字', 值)
    ​
    取值
        eventProxy.on('名字', 值 => {
            log(值)
             this.setState({
                 //更新的state 或者干点别的
              }, () => {
                  //做你想做的事
              })
          })
    ​
    ​
    如果传多个值 可以拼成对象 或者 写成数组 这个js不支持序列传值
    ​
    例如:
        传值
        eventProxy.trigger('名字', ['1','2'])
    ​
    取值
        eventProxy.on('名字', resArr => {
           log resArr[0]  //输出1
           log resArr[1]  //输出2
          })
    这个封装的js也不是我写的 不记得哪位大佬了 几个月以前使用的 如果是你的 可以留下链接 我在贴原处
    
    js 地址:我放在另一个页 不然太多了
    
    https://www.cnblogs.com/chen-yi-yi/p/13566856.html
    
    这个方法我特别喜欢~~~ 经常使用
    

      

    六、redux

    简单的传值满足不了你的需求 或者 当多个组件共用一个数据 频繁传值时 使用redux 状态管理器
    ​
    第一步安装:npm install --save redux
    ​
    第二步: -'嘻嘻' -下次单独写一篇~~~~
    

      

     

  • 相关阅读:
    C# 实现 Snowflake算法生成唯一性Id
    kafka可视化客户端工具(Kafka Tool)的基本使用(转)
    docker 安装kafka
    Model类代码生成器
    使用docker 部署rabbitmq 镜像
    Vue 增删改查 demo
    git 提交代码到库
    Android ble蓝牙问题
    mac 配置 ssh 到git (Could not resolve hostname github.com, Failed to connect to github.com port 443 Operation timed out)
    okhttp
  • 原文地址:https://www.cnblogs.com/chen-yi-yi/p/13566469.html
Copyright © 2011-2022 走看看