本篇文章主要介紹了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 'react'; import Item from './Item' 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中文網其他相關文章!