1. 程式人生 > >一次封裝react元件的過程

一次封裝react元件的過程

先說需求,我們需要的是在頁面展示各種使用者的一系列資料。然後點選某一個使用者,
這個使用者的資料以彈框的形式展示出來。
先看實現的效果圖


實現點選列表項出現彈框,我結合了ant-design元件來做。
首先我們實現的應該是列表資料,這個時候需要引入的元件為

我們需要自己定義一個元件NewsList
render中的內容為

在這個過程中,我們用到了用 async/await 來處理非同步, async 函式返回的是一個Promise物件,在函式內部使用try-catch語句捕獲錯誤。(這個限於真正的資料介面處理的時候)
我們會看到有從state中取出newsList資料,那我們的資料又是怎麼進行模擬的呢?
首先我們我的state中存在這個newsList資料,在頁面載入的過程中,我們進行模擬從後端中取資料
最後將資料儲存到狀態機中,當我們想在頁面中取的時候再從render中取。

我彈框中的內容有用ant-design的modal元件

這個方法定義在每一條item上面,通過從取到的介面資料在點選的時候進行傳引數,最後又在modal中渲染出來。

by還差的很遠