【React】react子父传值

gengboxb 652 0

父子组件传值(react 父子组件通信):

父组件给子组件传值

1.在调用子组件的时候定义一个属性 <Header msg='首页'></Header>

2.子组件里面 this.props.msg

说明:父组件不仅可以给子组件传值,还可以给子组件传方法,以及把整个父组件传给子组件,可以让子组件给父组件传值。

父组件主动获取子组件的数据

1、父组件调用子组件的时候指定ref的值 <Header ref='header'></Header>

2、父组件通过this.refs.header 获取整个子组件实例 (dom(组件)加载完成以后获取 )

子组件主动获取父组件的数据

1、在调用子组件的时候定义一个属性 <Header title={this.state.title} run={this.run} news={this} />

2、在父组件定义方法

//获取子组件里面穿过来的数据

    getChildData=(result)=>{

      alert(result);

      this.setState({

        msg:result
      })
   }

2、子组件按钮点击传值

<button onClick={this.props.news.getChildData.bind(this,'我是子组件的数据')}>子组件给父组件传值</button>

发表评论 取消回复
表情 图片 链接 代码

分享