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

本篇文章主要介紹了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中文網其他相關文章！