資訊專(zhuān)欄INFORMATION COLUMN
摘要：最近需要做一個(gè)表格組件，組件需求指定行列可以跨行跨列行和行之間有分割線(xiàn)最終采用實(shí)現(xiàn)需求。所以考慮采用的形式。關(guān)于相關(guān)的概念介紹可以參考阮一峰老師的文章介紹。然后返回一個(gè)組件，把組件替換原來(lái)的即可。想嘗試的小伙伴現(xiàn)在就可以碼一遍。
最近需要做一個(gè)表格組件，組件需求:
指定行、列
可以跨行、跨列
行和行之間有分割線(xiàn)
最終采用grid實(shí)現(xiàn)需求。實(shí)現(xiàn)的時(shí)候遇到一個(gè)問(wèn)題，如果css和js分開(kāi)寫(xiě)，css只能是定值，沒(méi)有靈活性。所以考慮采用css in js的形式。關(guān)于css in js相關(guān)的概念介紹可以參考阮一峰老師的文章：css in js 介紹。
在github上找了一下關(guān)于這方面的組件，發(fā)現(xiàn)styled components 非常不錯(cuò)，簡(jiǎn)單易上手，
npm下載：`npm i styled-components -S`
注意：
React < 16 需要下載3.x.x版本的
根據(jù)文檔先寫(xiě)一個(gè)簡(jiǎn)單的demo。
可以看到，它的實(shí)現(xiàn)方式并不是傳統(tǒng)的以對(duì)象的形式寫(xiě)樣式，而是將需要添加樣式的元素加到styled對(duì)象上，然后跟一個(gè)(``)反引號(hào)標(biāo)簽，在里面以正常的css格式寫(xiě)樣式。然后返回一個(gè)組件，把組件替換原來(lái)的div即可。
實(shí)現(xiàn)效果：
html代碼：
css代碼：
剛才我們添加樣式的元素是html元素，那么給組件添加樣式可以么？實(shí)踐一下：
const H1 = ({ className }) => 我是App
;
const HH = styled.H1`
font-size: 30px;
color: red;
`;
運(yùn)行，報(bào)錯(cuò)：
咋回事？原來(lái)styled不支持以 . 符號(hào)的形式為組件添加樣式，需要以參數(shù)形式傳遞，修改上面代碼
const HH = styled(H1)` font-size: 30px; color: red; `;
將H1組件以參數(shù)形式傳遞給styled,就可以了。
想給元素添加偽元素樣式，子元素樣式可以么？沒(méi)問(wèn)題，styled components支持樣式嵌套，按照類(lèi)似Less或Scss的書(shū)寫(xiě)方式就可以了。
const Container = styled.div`
width: 300px;
max-width: 500px;
min-width: 200px;
transition: all 1s ease-in-out;
background-color: rgba(240, 240, 240, 0.9);
::after {
content: "after";
display: table;
color: blue;
}
span {
color: green;
}
`;
以上我們寫(xiě)的組件都是在Class外面，那我們要根據(jù)props設(shè)定樣式怎么辦？styled components同樣支持在Class內(nèi)生成組件，并接受props傳遞過(guò)來(lái)的值，這個(gè)props并不是我們的Class接收的props，它是添加樣式的元素上的Props，意思就是
class Demo {
render(){
return
如果想使用Class的props怎么辦？看代碼:
generateStyle = () => {
const {row, col, justify, data, prefixCls, showborder = true, rowgap = 0, colgap = 0} = this.props;
const child = [];
data.map((item,index)=> (item.colSpan || item.rowSpan) ? child.push({index:index+1,colSpan:item.colSpan, rowSpan:item.rowSpan}):null);
const bordernone = [];
for(let i = 0; i < row; i++) {
bordernone.push(1 + i*col);
}
const UlContainer = styled.ul.attrs({className: prefixCls})`
display: grid;
grid-template-columns: ${()=> {
let arr = [];
arr.length = col;
return arr.fill("1fr").join(" ");
}};
grid-template-rows: ${()=> {
let arr = [];
arr.length = row;
return arr.fill("1fr").join(" ");
}};
grid-gap: ${rowgap} ${colgap} ;
justify-items: ${()=> justify || "center"};
::before {
display: none;
}
li {
width: 100% !important;
}
${
child.map(({index, colSpan, rowSpan}) =>`
li:nth-child(${index}) {
grid-column-start: ${index%col === 0 ? index : index%col};
grid-column-end: ${colSpan ? (colSpan+(index%col === 0 ? index : index%col)) : ((index%col === 0 ? index : index%col)+1)}
grid-row-start: ${Math.ceil(index/col)};
grid-row-end: ${rowSpan ? rowSpan+Math.ceil(index/col) : Math.ceil(index/col)+1};
align-items: start;
}
`).join(" ")
}
li + li {
border-left: 1px dashed rgba(0,0,0,0.3);
}
${
bordernone.map(bordernoneindex=>`
li:nth-child(${bordernoneindex}) {
border-left: none;
}
`).join(" ")
}
`;
return UlContainer;
}
提前把最后代碼放出來(lái)了，styled.ul.attrs({})就是為元素添加額外的屬性，比如className、placeholder等，從代碼中可以看到，無(wú)論是Class的props還是元素自身傳進(jìn)來(lái)的props，styled都可以接收,你可以自定義任何你想實(shí)現(xiàn)的規(guī)則,更方便我們配置的靈活性。
其實(shí)到這里，使用上沒(méi)有任何問(wèn)題了，關(guān)于keyframes等規(guī)則官網(wǎng)上都有demo，也非常容易實(shí)現(xiàn)。想嘗試的小伙伴現(xiàn)在就可以碼一遍。不過(guò)本章遺留了很多問(wèn)題：
styled.div & styled(div) 有什么區(qū)別
模版字符串中的樣式是怎么解析的？為什么可以嵌套？
為什么會(huì)返回一個(gè)組件？
下一章，我會(huì)根據(jù)styled componnets源碼解答上述問(wèn)題。
最后，祝生活愉快。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/117140.html
摘要：本周于上海閉幕，掘金和知乎上都有對(duì)應(yīng)的實(shí)錄和問(wèn)答，但會(huì)議的視頻目前都還沒(méi)放出來(lái)，有心的同學(xué)如果找到了歡迎分享。建議中英文對(duì)照閱讀。英文原文前端獨(dú)立技術(shù)博客推薦推薦一些現(xiàn)在還在堅(jiān)持原創(chuàng)的博主，有業(yè)界大牛，也有小鮮肉，也有國(guó)外美女。 CSS 樣式書(shū)寫(xiě)規(guī)范最佳實(shí)踐 本文的所列是實(shí)踐當(dāng)中得出的一套比較不錯(cuò)的 CSS 書(shū)寫(xiě)規(guī)范，可以結(jié)合自身團(tuán)隊(duì)發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...
摘要：本周于上海閉幕，掘金和知乎上都有對(duì)應(yīng)的實(shí)錄和問(wèn)答，但會(huì)議的視頻目前都還沒(méi)放出來(lái)，有心的同學(xué)如果找到了歡迎分享。建議中英文對(duì)照閱讀。英文原文前端獨(dú)立技術(shù)博客推薦推薦一些現(xiàn)在還在堅(jiān)持原創(chuàng)的博主，有業(yè)界大牛，也有小鮮肉，也有國(guó)外美女。 CSS 樣式書(shū)寫(xiě)規(guī)范最佳實(shí)踐 本文的所列是實(shí)踐當(dāng)中得出的一套比較不錯(cuò)的 CSS 書(shū)寫(xiě)規(guī)范，可以結(jié)合自身團(tuán)隊(duì)發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...
摘要：本周于上海閉幕，掘金和知乎上都有對(duì)應(yīng)的實(shí)錄和問(wèn)答，但會(huì)議的視頻目前都還沒(méi)放出來(lái)，有心的同學(xué)如果找到了歡迎分享。建議中英文對(duì)照閱讀。英文原文前端獨(dú)立技術(shù)博客推薦推薦一些現(xiàn)在還在堅(jiān)持原創(chuàng)的博主，有業(yè)界大牛，也有小鮮肉，也有國(guó)外美女。 CSS 樣式書(shū)寫(xiě)規(guī)范最佳實(shí)踐 本文的所列是實(shí)踐當(dāng)中得出的一套比較不錯(cuò)的 CSS 書(shū)寫(xiě)規(guī)范，可以結(jié)合自身團(tuán)隊(duì)發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...
摘要：這里要介紹的是工作流中的一種很普遍的代碼加工流程正常的業(yè)務(wù)邏輯開(kāi)發(fā)流程需要經(jīng)過(guò)預(yù)處理器如或，然后再經(jīng)過(guò)后處理器如進(jìn)行深加工。 還未看的，可以點(diǎn)擊查看上兩篇文章喲：Webpack 最佳實(shí)踐總結(jié)(一)、Webpack 最佳實(shí)踐總結(jié)(二) 好了，這篇是第三篇，也是完結(jié)篇，我感覺(jué)這一篇是最亂的一篇，湊合著看吧，不會(huì)讓你失望的 整合 CSS 加工流 有時(shí)候，前端項(xiàng)目中除了 JavaScript ...
摘要：這里要介紹的是工作流中的一種很普遍的代碼加工流程正常的業(yè)務(wù)邏輯開(kāi)發(fā)流程需要經(jīng)過(guò)預(yù)處理器如或，然后再經(jīng)過(guò)后處理器如進(jìn)行深加工。 還未看的，可以點(diǎn)擊查看上兩篇文章喲：Webpack 最佳實(shí)踐總結(jié)(一)、Webpack 最佳實(shí)踐總結(jié)(二) 好了，這篇是第三篇，也是完結(jié)篇，我感覺(jué)這一篇是最亂的一篇，湊合著看吧，不會(huì)讓你失望的 整合 CSS 加工流 有時(shí)候，前端項(xiàng)目中除了 JavaScript ...
閱讀 2731·2021-11-11 17:21
閱讀 622·2021-09-23 11:22
閱讀 3587·2019-08-30 15:55
閱讀 1649·2019-08-29 17:15
閱讀 581·2019-08-29 16:38
閱讀 915·2019-08-26 11:54
閱讀 2516·2019-08-26 11:53
閱讀 2762·2019-08-26 10:31
