React中父子元件傳值

2022-06-01 15:48:09 字數 1258 閱讀 5533

1.1 我們要明白父元件 --> 子元件 是通過props這個屬性來傳值的

我們來看父元件的**

1 import react from 'react'; 

2 import son1 from './son1';

3class father extends react.component

8render()

121314)

15}1617

}18 export default father;

接著看子元件

1 import react from 'react';

2class son1 extends react.component67

render()

11

1213)14

}1516}

17 export default son1;

頁面上就可以得到 hello這個值

在這裡我們分為4個步驟

2.1、在父元件中宣告乙個函式,用於接收子元件的傳值

2.2、通過元件屬性的方法,把函式傳遞給子元件

先看父元件的**

1 import react from 'react';  

2 import son1 from './son1';

3class father extends react.component8//

1、在這裡中宣告乙個函式,用於接收子元件的傳值

9message(msg)

13render()

17this.message}>

1819)20

}2122}

23 export default father;

2.3、在子元件中通過props屬性呼叫父元件的函式,並通過引數傳值

1 import react from 'react';

2class son1 extends react.component

6render()

10

1112)13

}1415}

16 export default son1;

2.4、在父元件中的函式通過形參接收子元件的傳值

這樣就可以看到控制台列印的效果

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...

React父子元件傳值

父元件向子元件傳遞內容,靠屬性的形式傳遞。import react,from react import item from item import style.css class itemlist extends component render onchange this.additem.bind...