1. 程式人生 > >React父子組價傳值

React父子組價傳值

父元件<News/>獲取子元件<Heder/>的值或方法: props

1:在子元件定義屬性 <Header msg='首頁'></Header>   子元件通過this.props.msg獲取值

 <Header title={this.state.title}  run={this.run}  news={this} />

2:子元件呼叫父元件方法;     //獲取父元件的值     <h2>{this.props.title}</h2>     //呼叫父元件的run方法     <button onClick={this.props.run}>呼叫news父元件的run方法</button>     //獲取父元件的getData方法     <button onClick={this.props.news.getData}>獲取news元件的getData方法</button>

總結:    通過設定子元件屬性,設定對應的值與方法;然後通過props進行方法呼叫與值獲取

子元件<Heder/>獲取父元件<News/>的值或方法: props 1:呼叫子元件的時候指定ref的值 <Header ref='header'></Header>            通過this.refs.header  獲取整個子元件例項  (dom(元件)載入完成以後獲取 )   alert(this.refs.header.state.msg); //獲取子元件的資料   通過props呼叫父類方法傳值    <button onClick={this.props.news.getChildData.bind(this,'我是子元件的資料')}>子元件給父元件傳值</button>

 總結:     子元件指定ref,獲取子元件例項,從而獲取子元件的值     通過porps呼叫父元件方法進行傳值