使用屬性Props完成一張卡片

DayDreame發表於2019-02-27

一:我們先安裝bootstrap,為了使我們的樣式好看些 cnpm install bootstrap --save使用屬性Props完成一張卡片

二:我們在index.js中引入bootstap

Import ‘bootstrap/dist/css/bootstrap.min.css’

使用屬性Props完成一張卡片

三:我們新建一個conponments資料夾,然後我們新建一個NameCard.js

使用屬性Props完成一張卡片

然後我們在App.js中引入NameCard元件,並在標籤中傳入我們想要的值name和number

使用屬性Props完成一張卡片

注意:如果小夥伴們是跟著上一屆節的程式走的話,我們需要進入index.js中把Welcome改為App,如果是這一節直接寫的,就不用擔心這個問題了

使用屬性Props完成一張卡片

四:執行我們的項就可以了目cnpm start

使用屬性Props完成一張卡片

五:我們接下來在新增一個是否是人類和一個標籤

首先我們使用三元表示式來判斷是否是人類,我們在NameCard的裡面新增 isHuman ? ‘人類’:’外星人’;在新增標籤的時候我們使用map去迴圈

使用屬性Props完成一張卡片

這裡面有一個知識點需要注意,就是span標籤中的key值,正常情況下我們接收到後臺傳過來的值之後,都會隨帶一個索引,這個key我們一般都用這個索引來表示,也可以理解成唯一的。他和vue中 v-for是一個道理的,但是這裡當後臺給我們傳給我們的資料基本都會帶一個id,我們如果把key值用這個id來表示,他其實響應效果要比用index好一點;這裡我們為了簡單,就用index了。


隨後,我們需要在App.js中新增我們的tags,我們自定義一個陣列const tags = [‘恐龍’,’超人’];在NameCard元件中引入isHunman和tags = {tags}

使用屬性Props完成一張卡片


相關文章