React 實踐專案 （四）

react在github上已經有接近70000的 star 數了，是目前最熱門的前端框架。而我學習react也有一段時間了，現在就開始用 react+redux 進行實戰！

react 實踐專案 （一）

react 實踐專案 （二）

react 實踐專案 （三）

react 實踐專案 （四）

建立 src/containers/submitentry.js

/**

* created by yuicon on 2017/7/13.
* */import react, from 'react';
import from "element-react";
import from "react-redux";
import from '../../redux/action/entries';
import './submitentry.css';
@connect(
(state) => );
}, )
export default class submitentry extends component ,
loading: false,
};} componentwillreceiveprops(nextprops) );
this.setstate(});
} else if (nextprops.entries.get('error')) );
}this.setstate();
} handlesubmit = () => );
};handlechange = (key, value) => )
});};
render()
}

編輯 package.json

// react-router-dom 包含 react-router

"react-router-dom": "^4.1.1",

/**

* created by yuicon on 2017/6/25.
*/import react, from 'react';
import from 'react-router-dom'
import index from "../index/index";
import header from "../header/header";
import submitentry from "../submitentry/submitentry";
render()
}

router 一共有三種，我們採用的是常用的 browserhistory

browserhistory h5的history

hashhistory 老版本瀏覽器的history

memoryhistory node環境下的history，儲存在memory中

route :

每個 route 標籤都對應乙個ui頁面,它的職責就是當頁面的訪問位址與 route 上的 path 匹配時，就渲染出對應的 ui 介面。

而是沒有 path 的,這意味著在每個頁面都會渲染出 header 元件.

exact :

route 上的 exact props 表示採用嚴格匹配,頁面的訪問位址與 route 上的 path 必須一樣

只會匹配 '/' , 不會匹配 '/submit-entry'

會匹配所有 '/' 開頭的路徑

history:

常用方法

push(path, [state]) 在歷史堆疊資訊裡加入乙個新條目。

常用於頁面跳轉，如：this.props.history.push('/');跳轉至首頁

replace(path, [state]) 在歷史堆疊資訊裡替換掉當前的條目

與 push 的區別是無法通過歷史堆疊返回跳轉前的頁面

goback() 等同於瀏覽器的後退鍵

match:

match 物件包含了 route 如何與 url 匹配的資訊，具有以下屬性：

params: object 路徑引數，通過解析 url 中的動態部分獲得鍵值對

i***act: bool 為 true 時，整個 url 都需要匹配

path: string 用來匹配的路徑模式，用於建立巢狀的

url: string url 匹配的部分，用於巢狀的

常用於獲取路徑中的引數

有這樣乙個路由

在 child 中可以這樣獲取到 id 引數this.props.match.params.id

React 實踐專案 （四）

react在github上已經有接近70000的 star 數了，是目前最熱門的前端框架。而我學習react也有一段時間了，現在就開始用 react redux 進行實戰！上回說到使用redux saga 管理 redux 應用非同步操作,應用還是只有乙個首頁.現在開始構建乙個新的投稿頁面並使用 r...

React專案實踐系列一

專案建立於2018年1月底，到現在已經接近半年，在此寫下半年來專案的實踐過程以及自己對前端的學習與體悟。技術選型 框架 react 路由 react router 4 狀態管理 redux ui元件庫 ant design 搭建工程 首先我們並不打算將react讓webpack打包，而使用第三方的c...

python實踐專案（四）

練習1 好玩遊戲的物品清單 意味著玩家有 1 條繩索 6 個火把 42 枚金幣等。寫乙個名為 displayinventory 的函式，它接受任何可能的物品清單，並顯示如下 inventory 12 arrow 42 gold coin 1 rope 6 torch 1 dagger total n...