import react from
'react'
// 1.父傳子、
// 2.子傳父
class
comcent
extends
react.component
state =
// 父元件接收子元件方法
getchildmsg
=(msg)
=>)}
render()
<
/h2>
childrenmsg=
/>
<
/div>)}
}class
children
extends
react.component
render()
<
/h3>
>點我子元件給父元件傳遞props值<
/button>
<
/div>)}
}// 3.兄弟元件之間的傳值
class
parentcom
extends
react.component
// 寫乙個函式接收兄弟2元件傳回來的值
returnadd=(
)=>)}
// 這是父元件，兩個兄弟元件要通過父元件來進來互動
render()
/>
>我是第乙個兄弟元件<
/child1com>
>
<
/child1com>
/>
<
/div>)}
}function
child1com
(props)
<
/p>
計數器：
<
/h1>
<
/div>)}
function
child2com
(props)
// 這是第二個兄弟元件
return
(>+1
<
/button>
<
/div>)}
// ---------------二：context---------------------
// context: 用來傳遞資料的，比如爺爺要傳給孫子，或者爺爺傳給孫子的孫子，
// 如果按元件傳值的話就要一層一層往下傳，這個時候就要用到context
// 使用步驟：
// 1.呼叫react.createcontext()建立provider(提供資料)和consumer(消費資料)兩個元件
// const = react.createcontext()
// 2.使用provider元件作為父節點
// //
//
//
// // 3.設定value屬性，表示要傳遞的資料
// // 4.呼叫consumer元件接收資料
// // }
// const
= react.
createcontext()
class
grandparentcom
extends
react.component
>
<
/div>
<
/provider>)}
}function
child1()
function
child2()
<
/span>
}<
/consumer>
<
/div>)}
// ----------------三、props深入-----props的校驗----------------------
// props校驗
// 1.props校驗:允許在建立組建的時候，就指定props的型別、格式等
// 2.作用：捕獲使用元件時因為props導致的錯誤，給出明確的錯誤提示
// 增加元件的健壯性
// colors: proptypes.array // 定義colors為陣列格式
// }
// 使用步驟：
// 1.安裝包： prop-types(npm i props-types)
// 2.匯入prop-types包
// import proptypes from 'prop-types'
// 3.使用元件名.proptypes = {}來給元件的props新增校驗規則
// 4.校驗規則通過proptypes物件來指定
// parentcom.proptypes =
// 常見型別：1. array(陣列)、bool(布林)、func(函式)、number(數值)、
// object(物件)、string(字串)
// 2.react元素型別: element
// 3. 必填項：isrequired
// 4.如果是物件則用shape()方法包裹起來
// parentcom.proptypes = )
// }
// ----------------四：設定元件預設值-------------------------------
// 如果元件中沒有傳預設值，那麼子元件中用props呼叫的就是這個預設值
function
defaultprops
(props)
<
/div>)}
defaultprops.defaultprops =
// export default comcent;
// export default parentcom;
// export default grandparentcom;
export
default defaultprops;
react 父子元件,兄弟元件傳值
昨天學習了class，今天開始學元件傳值了，說真的，我這都學第二遍了還是沒有繞過來 笑哭 哭笑 笑出眼淚 破涕為笑 笑死 笑尿 笑cry 所以我趕緊跑過來寫到這裡，跟小夥伴們一起學習一下，也能更好的加深一下印象，廢話不多說，下面就讓我們開始吧！先來看一下父傳子 父元件 建立建構函式 construc...
react父子元件通訊
父元件通過props向子元件傳值，子元件通過再constructor中props中獲取父元件的值，如果子元件要修改父元件的值，再子元件中通過this.state 來存下父元件的值，再通過this.setsate 來修改state,如果需要再把值傳給父元件，則通過，方法來實現 在父元件呼叫子元件的時候...
react父子元件傳值 react元件通訊
react元件之間的通訊，其實就是通過乙個props建立彼此之間的橋梁，而我們最常用的就是父子傳值，子父傳值，以及兄弟之間傳值 1 父元件給子元件傳值 父元件給子元件傳值相對比較簡單，如果想讓他們倆之間有所聯絡，想傳遞父元件的資料，那麼我們就在父級元件中的子元件標籤上定義乙個屬性，而屬性的值就是我們...