react總結 style的寫法

2021-10-07 09:32:16 字數 1399 閱讀 1080

本篇文章複習在react中style的4種寫法

1. 內聯式(不推薦)

import react,  from "react";


class style extends react.component 


render() 


return (


);}}


export default style;
這種寫法不推薦使用,樣式多了之後,會導致**比較亂!

2. 使用classname

import react,  from "react";


import "./../../style.css";


class style extends react.component 


render() 


}export default style;
新建乙個.css檔案,將檔案引進來,標籤中使用classname=「textcolor」,就可以使用引入.css檔案中類為』textcolor』的樣式了.一般的專案用這個方式就可以了.

3. 使用classnames動態修改樣式

import react,  from "react";


import classnames from 'classnames'


class style extends react.component 


render() 


}export default style;
這種動態修改樣式的方式,需要安裝外掛程式classnames.上面的**中,h1標籤的類有textcolor和texttitle.專案中一般也會使用.

4. 使用styled-components外掛程式寫標籤樣式

import react,  from 'react'


import styled from 'styled-components'


const title = styled.h1`


color: #f00;


`class style extends react.component 


render() 


}export default style
使用styled-components給標籤寫樣式,首先需要安裝該外掛程式.上面的**是定義乙個title,通過styled給h1標籤設定樣式,然後在元件中使用的title就相當於寫過樣式的h1標籤.這種方式在大專案中比較常見.

5. 總結

還有一些其他的寫法,這裡就不記載了,以上的用法就足夠在專案中使用了!

react事件的多種寫法

類裡面的函式,放在類的原型物件上，供例項物件呼叫 class person 一般方法 speak onclick 通過this這個例項物件獲取handleclick函式 此時handleclick是自己執行的，所以this指向undefined 定義箭頭函式this指向定義時的this，class ...

react 鏈式寫法校驗資料

使用方法try catch error 複製 原始碼,使用了moment 沒怎麼測試哦 import moment from moment export default class joi 必填，不能為空 required message 不能為空 return this 最小長度 minlengt...

Masonry的寫法總結

masonry使用鏈式方式程式設計，有定義一些巨集來方便開發，如下 define offset mas offset va args define equalto mas equalto va args define greaterthanorequalto mas greaterthanorequ...