react元件的資料傳遞

2022-07-01 09:51:10 字數 2117 閱讀 2573

在react中,為了解決html標籤構建應用的不足,將公共的功能單獨抽離成乙個檔案作為乙個元件,在使用的地方按需引入,既然是元件彼此呼叫,就會涉及到父子元件的通訊,下面主要來總結簡單的元件通訊。

要在子元件中獲取父元件傳遞的值,只需要兩步就可以了:

在呼叫子元件的時候定義乙個屬性

子元件裡面 this.props.msg

根據這兩步,我們分別修改header.js和news.js

在子元件中使用父元件的方法,需要分成3步:

在父元件中定義方法;

在呼叫子元件的時候繫結該方法

在子元件中使用該方法。

我們將上面的**稍作調整,在父元件header.js中定義乙個執行列印語句的方法

然後在呼叫子元件的時候,繫結這個方法

最後,在子元件news.js中的乙個按鈕上新增點選事件,通過點選事件呼叫該方法。

想要在父元件中獲取子元件的資料和方法,可以先在父元件中獲取整個子元件例項,繼而再獲取例項和方法就可以了。

然後在父元件中呼叫子元件的時候指定ref的值 ,並通過this.refs.header 獲取整個子元件例項

當我們執行父元件的點選事件時,就可以使用子元件的方法和資料了。

完整的父子元件**如下:

header.js

import react, from

'react

'class

header extends component

}childfun=()=>

render()

}export

default header;

news.js

import react, from

'react

'import header

from

'./header

'class

news extends component

}run=()=>

getheader=()=>)

}render()

this.getheader}>執行子元件的方法

) }

}export

default news;

上面,通過在父元件中獲取整個子元件的例項,從而獲取了元件的資料和方法,其實,在子元件中,也可以獲取整個父元件的例項,從而獲取父元件的資料和方法。

首要,父元件中定義資料和方法,並在呼叫子元件的時候,定義乙個屬性,傳入this,即當前元件。

然後在子元件中,可以直接使用這些資料和方法

當然了,這種情況下也可以很方便的將子元件的資料傳遞到父元件了,而不在需要通過在父元件中獲取整個子元件了。

react元件與元件之間的資料傳遞

常規的資料傳遞方式就是父傳子,子元件直接通過this.props來使用。子元件通過父元件的事件方法來傳遞 例如 父元件 export default class search extends component this.setserviceview this.setserviceview.bind...

React 資料傳遞 資料變化

在頁面中引用header時,這樣寫,即給header元件設定乙個title屬性,而在header元件中可以這樣取到 render p p div hello index.jsx頁面 render return title hello頁面 aaa onclick hello world p div 在...

331 react資料傳遞

react資料傳遞 react資料傳遞 1.state 2.props 3.context 一.建構函式 constructor 二.state constructor add 我們來看下完整 import react,from react constructor add render 三.prop...