react 父子组件传值 兄弟组件传值

  • Z时代
  • 2024-01-10
  • 分类：综合

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={{ width: '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
​
第二步: -'嘻嘻' -下次单独写一篇~~~~

　　

以上是 react 父子组件传值 兄弟组件传值 的全部内容， 来源链接： utcz.com/z/383254.html

回到顶部