逆戰班 react元件間的傳值

在react中元件件的傳值，可以是父子之間的傳值，也可以是非父子之間（兄弟之間）的傳值。

父子間的傳值：（1）、父傳子：子元件如果是類元件，通過this.props獲取父元件傳遞過來的值；子元件如果是無狀態元件，則通過props獲取父元件傳遞過來的值。

（2）、子傳父：主要是呼叫父元件傳過來的方法，把實參傳遞到父元件方法中的實參中。

兄弟間的傳值：主要用pubsub-js外掛程式完成

1、父子元件之間的傳值

（1）、父傳子

父元件中：

render()

}子元件是類元件：

class counter extends react.component

render()
}

子元件是無狀態元件：

var counter=(props)=>

（2）、子傳父

在父元件father.js中

import react,  from 'react'import child from "../child"    //

引入子元件child
export default
class father extends component 
render() />      
)    }
}

在子元件child.js中

import react,  from 'react'export 

default
class child extends component 
}render() >    
)    }
}

2、兄弟元件之間的傳值

1、安裝外掛程式：使用npm安裝:npm i pubsub-js

2、傳值的元件和接受的元件都要引入pubsub-js

import pubsub-js from "pubsub-js"

3、所要傳值的元件：  pubsub.publish("事件名","資料")；

所要接受值得元件： pubsub.subscribe("事件名",(evt,data)=>)

注意：事件名一定要相同

傳值的元件中：

import react,  from 'react'import pubsub from "pubsub-js"export 

default class pubsub2 extends component 
send=()=>
render() >send
)    }
}

接收傳值的元件中：

import react,  from 'react'import pubsub from "pubsub-js"export 

default class pubsub2 extends component 
send=()=>
render() >send
)    }
}

結語：以上就為簡單的父子元件之間和非父子元件之間傳值的基本過程。除此之外，react傳值的方式還有上下文context物件傳值，用context進行元件間的傳值可以解決祖孫元件之間傳值必須一代一代往下傳的問題。這種傳值方式較為靈活，祖輩的元件可以直接傳值到後輩的任何乙個元件，方便又靈活。

React 元件間傳值

一 1 通過function宣告的元件特點是 1 function建立的元件是沒有state屬性，而state屬性決定它是不是有生命週期。2 function沒有constructor建構函式，3 function的渲染方法是直接呼叫。4 function中不可以用箭頭函式 一 2 通過class宣...

元件祖孫傳值 react元件間的傳值

在react中元件件的傳值，可以是父子之間的傳值，也可以是非父子之間 兄弟之間 的傳值。父子間的傳值 1 父傳子 子元件如果是類元件，通過this.props獲取父元件傳遞過來的值 子元件如果是無狀態元件，則通過props獲取父元件傳遞過來的值。2 子傳父 主要是呼叫父元件傳過來的方法，把實參傳遞到...

React元件間的Context傳值

在乙個典型的 react 應用中，資料是通過 props 屬性自上而下 由父及子 進行傳遞的，如下 themebtn 中想要獲取到context 中的 text 屬性，需要將 text 屬性從 context 傳遞到 再傳遞到 themebtn，可以想象假如有10層，那將極其繁瑣！context提供...