React中context的使用方法

2022-09-07 06:42:13 字數 1048 閱讀 9310

//

引入react

import react, from 'react';

//引入樣式

/** 通過下面案例你將領略context的使用方法

* 使用方法總結:

* 1.先建立乙個context容器物件,可以進行結構provider及consumer方便之後的簡單應用。

* 2.包裹要用的元件,給誰用就在誰的外面包裹,使用屬性關鍵字value進行傳值,value不可改變。

* 3.在**使用就在**宣告,static contexttype = 容器物件名字;

* 4.使用this.content獲取

* 注意上述方法只限於類式元件,如果你使用的是函式式元件,那麼你應該用下面的方式去做

* *

* }

* **

*///

建立乙個context容器物件,注意開頭大寫

const mycontext =react.createcontext()

//拿出provider及consumer

const =mycontext;

//定義乙個祖元件

state =

render() = this

.state;

return

(

我的名字:

); }}//

父級元件

render() = this

.props;

return

(

); }}//

子元件-類式生命

/* // 宣告context

static contexttype = mycontext;

render() = this.context;

return (

);}}*/

//子元件-函式式宣告

function

return

( })}

export

}

react中Context的使用

context 提供了乙個無需為每層元件手動新增 props,就能在元件樹間進行資料傳遞的方法。props單向資料流動 如果覺得props傳遞資料很繁瑣,可以採用context,進行跨元件傳遞資料 例如給子代元素傳遞一筆錢 手動新增狗頭 為了後續使用方便,封裝乙個元件 import from rea...

react中Context的使用

context 提供了乙個無需為每層元件手動新增 props,就能在元件樹間進行資料傳遞的方法。props單向資料流動 如果覺得props傳遞資料很繁瑣,可以採用context,進行跨元件傳遞資料 例如給子代元素傳遞一筆錢 手動新增狗頭 為了後續使用方便,封裝乙個元件 import from rea...

React中的Context怎麼用

今天在學習styled components的theming時,關於styled components對主題的實現與管理上提到,主要應用到了react的context api,所以好好研讀了一下官方文件,對該api做了如下記錄。當我們使用react時,很容易的通過觀察元件的props來跟蹤元件間的資...