react元件傳參方法

2021-10-05 03:34:37 字數 1839 閱讀 8609

1.props傳參

>

/*在子元件中*/

this

.props.age 獲取資料

setage

= v=>

this

.setstate()

setage=

>

/*在子元件使用*/

>

2.上下文傳遞引數 context

1.引入的context資料 時 實時更新 當乙個資料發生改變所有引用資料的檢視發生改變

父元件

1匯入型別檢測 import

from

'./context'

2.定義匯出的資料型別

static contexttypes =

3. 獲取需要傳參的資料

getchildcontext()

)}}

子孫元件

1.定義上下文資料型別

static contexttypes =

2.使用上下文資料

}>child元件<

/h3>

使用上下文方法

>

上下文方式傳參 context provider consumer

1定義上下文元件

import react from

'react'

let= react.

createcontext()

;// 建立乙個上下文 結構 consumer 消費者, provider **商

export

// 匯出

父元件

1.匯入

import

from

'./context'

2.用provider包裹子元素並傳遞value資料

}>

<

/provider>

子元件

1匯入

import

from

'./context'

2.coumsumer中的context獲取資料

>

<

/button>

<

/h3>

<

/div>)}

<

/consumer>

全域性資料狀態共享 redux react-redux

1.安裝 npm i redux react-redux

2.從react-redux匯入provider

import

from

'react-redux'

3把根元件替換為 

>

<

/provider>

4.4在provider新增資料倉儲

>
5.編寫store倉庫並匯入倉庫

6.編寫stort

7.在元件中使用

export

default

connect

(mapstatetoprops,mapdispatchtoprops)

(detail)

mapstatetoprops 把state資料對映為元件的props

mapdispatchtoprops 把state方法對映為元件的props

react元件傳參

父元件向子元件傳參 父傳子通過 props 屬性向子元件的attr中傳值 父元件 parent.js import react,from react import child from child export default class parent extends component rende...

React元件傳參

1.基礎傳參 父元件 1.傳遞資料 2.傳遞方法 setage v this.sestate setage 子元件 獲取資料 2.2.context上下文傳遞引數 特點 引入的context資料是實時更新的,當乙個資料發生改變,所有引用的檢視都會自動更新。父元件 1.匯入型別檢測 import pr...

react 元件傳參

父元件 render111 return 有狀態元件接受引數 render 我內部的資料 無狀態元件接受引數 import react from react function nostatecomponent props cjs esm export default nostatecomponent...