美文网首页React
React父子组件通信

React父子组件通信

作者: _hider | 来源:发表于2019-06-02 10:58 被阅读0次

1.父组件传数据给子组件

父组件传数据给子组件是用props来实现的,子组件内部调用this.props.xx来获取传递的值,这个值在子组件内部一般只用作展示用,最好不要在子组件中进行修改。

父组件
<ChildComponent ChildName="don"/>
子组件
import React from 'react';

class ChildComponent extends React.Component{
    render(){
        return(
            <React.Fragment>
                从父组件传过来的值是{this.props.ChildName}
            </React.Fragment>
        )
    }
}
export default ChildComponent;

2.子组件传递数据给父组件

子组件传递数据给父组件是通过事件传参实现的,调用父组件传过来的事件的同时将数据作为参数返回给父组件。

父组件
...
introduce(valFromChild){
    console.log(`从子组件传过来的值是${valFromChild}`)
}
render(){
    return (        
        <React.Fragment>            
        <ChildComponent                 
            IntroduceFn = {this.introduce}/>                
        </React.Fragment>            
    )       
}   
... 
子组件
<React.Fragment>
    <button onClick={this.props.IntroduceFn.bind(this,"hello")}>点击</button>
</React.Fragment>

子组件点击后调用IntroduceFn并将"hello"作为参数返回,父组件触发introduce方法后就可以从参数中获取子组件传过来的值了。

相关文章

  • React父子组件间通信的实现方式

    React学习笔记之父子组件间通信的实现:今天弄清楚了父子组件间通信是怎么实现的。父组件向子组件通信是通过向子组件...

  • 「React Native」Event Bus,消息总线

    (一)父子间组件通信:   一般使用props,回调函数进行通信。(二)跨组件之间通信:  (1)React Na...

  • react 组件通信

    概述 react中的组件通信问题,根据层级关系总共有四种类型的组件通信:父子组件、爷孙组件、兄弟组件和任意组件。前...

  • React入门基础知识总结

    1.React组件 function组件, class组件,来自ES6的class语法, 2. 父子组件通信 父组...

  • vue中的组件通信

    一、组件通信(组件传值) 1.1父子组件通信 1.2子父组件通信 1.3非父子组件通信(兄弟组件通信)

  • React02-组件通信

    React父子组件之间如何通信父组件传一个函数给子组件,子组件在适当的时候调用这个函数React爷孙组件之间如何通...

  • React 父子组件通信

    通讯是单向的,数据必须是由一方传到另一方。 1.父组件与子组件间的通信。 在 React 中,父组件可以向子组件通...

  • react父子组件通信

    父组件通过props 给子组件传递数据,子组件则是通过调用父组件传给它的函数给父组件传递数据。

  • react父子组件通信

    父组件向子组件通信 回调函数 直接把函数传到组件里面,然后组件里面调用this.props.goDetail函数来...

  • react 父子组件通信

    1. 子组件拿到父组件数据 在父组件中定义一个函数,将其传递到子组件中,子组件调用这个回调函数就可以拿到父组件中的...

网友评论

    本文标题:React父子组件通信

    本文链接:https://www.haomeiwen.com/subject/rdotxctx.html