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呼叫父元件方法進行傳值