React實戰 css元件化

2、全域性樣式

3、元件內樣式

npm

install styled-components -d

import

from
'styled-components'
export
const
[自定義標籤名]
= createglobalstyle`
[全域性樣式]
`;

import

from
'...'
render()
)}

import styled from

'styled-components'
// attrs 可以新增屬性，沒有也可以不加
export
const
[自定義標籤的名字]
= styled.
[標籤]
.attrs()
`	[普通css**]
&[這個標籤同級的css選擇器] —— 如：&.other{}
&::[偽選擇器] —— 如：&::after{}
`

import styled from

'styled-components'
import logoimg from
'../../static/logo.png'
// 引入
export
const logo = styled.a.
attrs()
`    width:100px;
height:100px;
background:url($);
background-size:contain;
`

import react,

from
'react'
import
from
'./styled.js'
class
test
extends
component
}export
default test

React 元件化程式設計

父元件與子元件進行互動 我們可以在父元件中設定 state，並通過在子元件上使用 props 將其傳遞到子元件上。在 render 函式中,我們設定 name 和 site 來獲取父元件傳遞過來的資料。父元件的state 狀態 作為props引數 子元件的props 屬性 子元件根據props設定自...

react元件化todolist例項

首先建立react的腳手架 具體建立步驟自己查 首先建立乙個todelist 在src下建立乙個components資料夾 裡面建立乙個todo的資料夾 todo裡面建立乙個index.js檔案這裡是父元件 在裡面寫 此處只是做乙個小例子演示下react的元件化 元件化的理解 1.元件的封裝 檢視 ...

react 專案實戰（六）提取布局元件

重複 是混亂的根源！本篇文章我們來繼續消滅重複 細心的同學應該能發現 每乙個page元件 src pages下的元件 的render方法都擁有相似的jsx結構，比如 render 每乙個頁面都包含乙個頁面的標題 header標籤和h1標籤 並且頁面的主要部分都被放在了乙個main標籤中。現在很多 的...