React 之 this.props

Render 發布于2019-08-23 16:58 / 2819人閱讀

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

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

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

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

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

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

首先打印 this.props.match ：

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

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

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

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

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

// 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"

鏈接描述

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103606.html

React之組件通信

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

binta 2019-08-26 13:42 評論0 收藏0
React 應用設計之道 - curry 化妙用

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

sewerganger 2019-08-22 16:27 評論0 收藏0
React 應用設計之道 - curry 化妙用

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

LinkedME2016 2019-08-02 10:14 評論0 收藏0
React系列之 React入門

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

pf_miles 2019-08-20 11:06 評論0 收藏0
react-lazy-load粗讀

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

dailybird 2019-08-26 12:13 評論0 收藏0