React父子元件傳值

2022-09-11 08:45:14 字數 1876 閱讀 1489

父元件向子元件傳值使用props，子元件向父元件傳值通過觸發方法來傳值。具體栗子如下。

import react,  from "react";


import from 'antd'


import childcomponent from "./childcomponent"; 


export default () => } placeholder


='請輸入內容' 


value


= onchange


= />


div>


<


childcomponent 


inputvalue1


=/>　　//向子元件傳遞了乙個inputvalue1


div>


);};



import react,  from "react";


import from "antd";


export default (props: any) => 


p>　　//通過props拿到了父元件傳遞的inputvalue1


div>


);};
父元件向子元件傳值時，先將需要傳遞的值傳遞給子元件，然後在子元件中，使用props來接收父元件傳遞過來的值，具體的可看建立父子元件的**。

父元件將inputvalue1傳遞給子元件：

<


childcomponent 


inputvalue1


= />
子元件通過props接收inputvalue1：

<


p>inputvalue1：


p>
這樣在父元件的input改變時，子元件通過props獲取的inputvalue1也會實時改變。如：在父元件輸入框輸入「改變了父元件」，子元件也變成了「改變了父元件」。這樣乙個父元件向子元件傳值就完成了。

子元件向父元件傳值時，需要通過觸發方法來傳遞給父元件

父元件定義乙個方法：

<


childcomponent 


inputvalue1


= childclick


= /> //定義乙個childclickfunc方法



const childclickfunc = (value: any) =>
子元件觸發父元件方法：

<


button 


onclick


=>點選改變父元件的值


button


> //通過props觸發父元件傳遞的方法
點選button按鈕後，觸發父元件方法，父子元件的值都更改為「子元件改變父元件的inputvalue」，這樣子元件向父元件傳值就完成了。

父元件需要向子元件傳遞多個值，比如inputvalue1，inputvalue2，inputvalue3.......

方法1：

<


childcomponent 


inputvalue1


= inputvalue2


= inputvalue3


= childclick


= />
方法2：

<


childcomponent 


} childclick


= />
兩種寫法都可進行傳值，只是第二種比較簡潔。

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