在react中元件件的傳值，可以是父子之間的傳值，也可以是非父子之間(兄弟之間)的傳值。
父子間的傳值：(1)、父傳子：子元件如果是類元件，通過this.props獲取父元件傳遞過來的值；子元件如果是無狀態元件，則通過props獲取父元件傳遞過來的值。
(2)、子傳父：主要是呼叫父元件傳過來的方法，把實參傳遞到父元件方法中的實參中。
兄弟間的傳值：主要用pubsub-js外掛程式完成
1、父子元件之間的傳值
(1)、父傳子
父元件中：
render() from 'react'
import child from "../child" //引入子元件child
export default class father extends component
在子元件child.js中
import react, from 'react'
export default class child extends component
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 from 'react'
import pubsub from "pubsub-js"
export default class pubsub2 extends component { //傳值的元件
constructor(props){
super(props)
send=()=>{
pubsub.publish("event","sss") //所要傳值得元件,第乙個引數為事件名，第二個引數為所要傳的值
render() {
return (
pub2send
結語：以上就為簡單的父子元件之間和非父子元件之間傳值的基本過程。除此之外，react傳值的方式還有上下文context物件傳值，用context進行元件間的傳值可以解決祖孫元件之間傳值必須一代一代往下傳的問題。這種傳值方式較為靈活，祖輩的元件可以直接傳值到後輩的任何乙個元件，方便又靈活。
標籤：component,js,react,props,元件,import,傳值
React 元件間傳值
一 1 通過function宣告的元件特點是 1 function建立的元件是沒有state屬性，而state屬性決定它是不是有生命週期。2 function沒有constructor建構函式，3 function的渲染方法是直接呼叫。4 function中不可以用箭頭函式 一 2 通過class宣...
元件祖孫傳值 Vue 元件間傳參最佳實踐
1.父子元件間的資料傳遞 1.1從父元件獲取子元件的資料 1.1.1通過繫結 props 將父元件的資料關聯到子元件，並修飾 sync 或者用 v model 同步來自子元件的資料變化 使用.sync 父元件 toggle import mydialog from components mydial...
React元件間的Context傳值
在乙個典型的 react 應用中，資料是通過 props 屬性自上而下 由父及子 進行傳遞的，如下 themebtn 中想要獲取到context 中的 text 屬性，需要將 text 屬性從 context 傳遞到 再傳遞到 themebtn，可以想象假如有10層，那將極其繁瑣！context提供...