首頁 > web前端 > js教程 > 主體

詳細介紹react 父元件與子元件之間的值傳遞

巴扎黑
發布: 2017-09-16 09:52:10
原創
1139 人瀏覽過

本篇文章主要介紹了react 父元件與子元件之間的值傳遞的方法,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧

概念上,元件是封閉的環境。 React中是單向資料流的設計,也就是說只有父元件傳遞資料給子元件這回事。以正確的技術說明,擁有者元件可以設定被擁有者元件中的資料。

那麼子元件要如何與父元件溝通這件事,簡單的來說,是一種迂迴的作法,在父元件中設定了一個方法(函數),然後傳遞給子元件的props,子元件在事件觸發時,直接呼叫這個props所設定的方法(函數)。但這中間,有誰(對象)呼叫了函數的設置,也就是this的作用。

父元件到子元件用props設置,子元件到父元件用上面說的方式,這是基本的套路,但它只適用於簡單的元件結構,因為它相當麻煩,而且不靈活。那麼如果要作到子元件與子元件要彼此溝通這件事,就不是太容易。當然,我想你已經聽過,複雜的應用需要額外使用flux或redux來解決這個問題,這是必經之路。

不過,在思考整體的React應用設計時,要有應用領域狀態,也就是全域狀態的概念。第一是應用領域state(狀態)的,通常會在父元件中,而不是子元件中,子元件有可能很多,位於樹狀結構很深的地方。

範例:

子元件


import React, { Component } from 'react'

export default class Item extends Component {
 constructor(props) {
  super(props)

  this.state = {
   prices: 0
  }
 }

 handleChange(){
  const prices =800;
  this.setState({
   prices: price
  })
  //用传过来的changePrice属性(props),是个函数,呼叫它把price交给父组件中的函数去处理
  this.props.changePrice(price)
 }

 render() {
  const { prices } = this.state;
    return (
     <p>
       <p onChange={this.handleChange.bind(this)}>
       </p>
       <p>{prices}</p>
     </p>
    )
 }
}
登入後複製

父元件


import React, { Component } from &#39;react&#39;;
import Item from &#39;./Item&#39;

class App extends Component {
 constructor(props) {
  super(props)

  this.state = {price: 0}
 }
 
 //给子组件用来传price用的方法
 changePrice(price){
  this.setState({price: price})
 }

 render() {
  return (
   <p>
    <Item changePrice={this.changePrice.bind(this)}/>
    <p>{this.state.price}</p>
   </p>
  );
 }
}

export default App;
登入後複製

以上是詳細介紹react 父元件與子元件之間的值傳遞的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!