成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React 之 this.props

Render / 2828人閱讀

摘要：相當于的對象形式表示，通過字段可以獲取到中的信息。每個都會對應一個對象，你可以在對象里存儲數(shù)據(jù)，但這個數(shù)據(jù)卻不會出現(xiàn)在中。實際上，數(shù)據(jù)被存在了中包含了具體的信息，在字段中可以獲取到各個路由參數(shù)的值。

在 react 組件的 componentDidMount 方法中打印一下 this.props，在瀏覽器控制臺中查看輸出如下：

其中頁面的 url 信息全都包含在 match 字段中，以地址：

localhost:3000/app/knowledgeManagement/modify/STY20171011124209535/3/1507701970070/0/?s=1&f=7

為例，其中各個參數(shù)定義對應如下：

localhost:3000/app/knowledgeManagement/modify/:studyNo/:stepId/:randomNum/:isDefault/?s=&f

首先打印 this.props.match ：

可以看到 this.props.match 中包含的 url 信息還是非常豐富的，其中

history：包含了組件可以使用的各種路由系統(tǒng)的方法，常用的有 push 和 replace，兩者都是跳轉(zhuǎn)頁面，但是 replace 不會引起頁面的刷新，僅僅是改變 url。

location：相當于URL 的對象形式表示，通過 search 字段可以獲取到 url 中的 query 信息。（這里 state 的含義與 HTML5 history.pushState API 中的 state 對象一樣。每個 URL 都會對應一個 state 對象，你可以在對象里存儲數(shù)據(jù)，但這個數(shù)據(jù)卻不會出現(xiàn)在 URL 中。實際上，數(shù)據(jù)被存在了 sessionStorage 中）

match：包含了具體的 url 信息，在 params 字段中可以獲取到各個路由參數(shù)的值。

通過以上分析，獲取 url 中的指定參數(shù)就十分簡單了，下面是幾個例子：

// localhost:3000/app/knowledgeManagement/modify/STY20171011124209535/3/1507701970070/0/?s=1&f=7
// localhost:3000/app/knowledgeManagement/modify/:studyNo/:stepId/:randomNum/:isDefault/?s=1&f=7

// 獲取 studyNo
this.props.match.match.params.studyNo // STY20171011124209535

// 獲取 stepId
this.props.match.match.params.stepId // 3

// 獲取 success
const query = this.props.match.location.search // "?s=1&f=7"
const arr = query.split("&") // ["?s=", "f=7"]
const successCount = arr[0].substr(3) // "1"
const failedCount = arr[1].substr(2) // "7"

鏈接描述

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103606.html

相關(guān)文章

  • React之組件通信

    摘要：最近閑來無事自學框架，自學過程中所有的問題經(jīng)驗都會在此記錄，希望可以幫助到學習框架的同學廢話不多說上代碼。 最近閑來無事自學React框架，自學過程中所有的問題經(jīng)驗都會在此記錄，希望可以幫助到學習React框架的同學,廢話不多說上代碼。首先是父傳子： import React, { Component } from react; import Com1 from ./componmen...

    binta 評論0 收藏0

  • React 應用設(shè)計之道 - curry 化妙用

    摘要：右側(cè)展現(xiàn)對應產(chǎn)品。我們使用命名為的對象表示過濾條件信息，如下此數(shù)據(jù)需要在組件中進行維護。因為組件的子組件和都將依賴這項數(shù)據(jù)狀態(tài)?；瘧迷倩氐街暗膱鼍?，我們設(shè)計化函數(shù)，進一步可以簡化為對于的偏應用即上面提到的相信大家已經(jīng)理解了這么做的好處。 showImg(https://segmentfault.com/img/remote/1460000014458612?w=1240&h=663...

    sewerganger 評論0 收藏0

  • React 應用設(shè)計之道 - curry 化妙用

    摘要：右側(cè)展現(xiàn)對應產(chǎn)品。我們使用命名為的對象表示過濾條件信息，如下此數(shù)據(jù)需要在組件中進行維護。因為組件的子組件和都將依賴這項數(shù)據(jù)狀態(tài)。化應用再回到之前的場景，我們設(shè)計化函數(shù)，進一步可以簡化為對于的偏應用即上面提到的相信大家已經(jīng)理解了這么做的好處。 showImg(https://segmentfault.com/img/remote/1460000014458612?w=1240&h=663...

    LinkedME2016 評論0 收藏0

  • React系列之 React入門

    摘要：原文地址是一個庫，主要是通過操作數(shù)據(jù)的方式去操縱，為什么要重造輪子呢，因為覺的目前市面上的框架對于創(chuàng)建大型應用程序不夠直觀，不能滿足需求，所以誕生了。其實說它性能高，只不過是用的方式計算出最小的操作，所以性能就上來了。 原文地址：https://gmiam.com/post/react-... React 是一個 JS 庫，主要是通過操作數(shù)據(jù)的方式去操縱 DOM，為什么要重造輪子呢，因...

    pf_miles 評論0 收藏0

  • react-lazy-load粗讀

    摘要：粗讀近來沒什么特別要做的事，下班回來的空閑時間也比較多，所以抽空看看懶加載是怎么實現(xiàn)的，特別是看了下的庫的實現(xiàn)。之先別關(guān)注，按他給注釋說測試用。之是組件綁定事件時會觸發(fā)的函數(shù)。 react-lazy-load粗讀 近來沒什么特別要做的事，下班回來的空閑時間也比較多，所以抽空看看懶加載是怎么實現(xiàn)的，特別是看了下 react-lazy-load 的庫的實現(xiàn)。 懶加載 這里懶加載場景不是路由...

    dailybird 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<