004 React 父子元件之間傳值和調函式

在父元件中直接將值寫入元件標籤引數中，然後寫入資料即可

而子元件中接收此引數直接使用this.props.引數名  即可拿到父元件傳遞的引數。

例子：

相比於vue直接在例項當中的props欄位中限定傳入引數的型別，react需要引入額外的拓展  prop-types

對於傳入期望型別不符的引數則會報錯

注意，定義引數型別的物件要定義在例項外面

如果想要引數不傳遞就報錯,這就需要使用isrequired關鍵字了,它表示必須進行傳遞，如果不傳遞就報錯。

proptypes型別

react.proptypes.array           // 佇列

react.proptypes.bool.isrequired // boolean 且必須
react.proptypes.func            // 函式
react.proptypes.number          // 數字
react.proptypes.object          // 物件
react.proptypes.string          // 字串
react.proptypes.node            // 任何型別的: numbers, strings, elements 或者陣列
react.proptypes.element         // react 元素
react.proptypes.instanceof(***) // 某種***型別的物件
react.proptypes.oneof(['foo', 'bar']) // 其中的乙個字串
react.proptypes.oneoftype([react.proptypes.string, react.proptypes.array]) // 其中的一種型別
react.proptypes.arrayof(react.proptypes.string)  // 某種型別的陣列(字串)
react.proptypes.objectof(react.proptypes.string) // 元素是字串的物件
react.proptypes.shape();
react.proptypes.any.isrequired  // 可以是任何格式，且必要。

與vue的$emit不同的是，react的子元件呼叫父元件的方式同樣是使用this.props.函式名，

在子元件中通過this.props.函式名（引數）呼叫在父元件中寫在子元件標籤中的函式即可，注意父元件的函式同樣要繫結this

例子

react父子元件傳參

父子元件通訊主要用到props，如下 在父元件中 import react from react import childcom from childcom.js class parentcom extends react.component export default parentcom 複製 ...

React 父子元件傳值

什麼叫模組化元件化的開發模式，把共同的部分提取出來。就比如html中的頭部都需要用到，我們就把這部分提取出來。引入乙個 react 定義資料和結果 export default home 就是把元件暴露出來，在其他地方引用這個元件就可以使用。react 元件解決html構建的不足 import re...

React父子元件傳值

父元件傳值給子元件 父元件呼叫子元件方法 父元件 import react from react import from ant design pro layout import childrenorder from components childrenorder 引入子元件 class proc...