摘要
在react中添加動態的css時，傳統的方式較為繁瑣，今天剛好學習到一個模塊庫可以便捷的解決這個問題。對的，它就是“classnames”。
classnames模塊庫
npm安裝
npm install classnames --save
Usage with React.js
classnames函數接受任意數量的class參數，這些class參數可以是字符串或對象，class參數同給定true || false來動態的增減class樣式。下面展示一個簡單的動態點擊class的類樣式來解釋classnames的基本用法。利用React hooks快速的渲染點擊事件的state，為了更好的展示本例，在setState時取！state實現點擊循環渲染字體顏色的方式。
App.js代碼
import React, { useState } from 'react' import './App.less' import classnames from 'classnames' const App = () => { const [clickStatus,setClickStatus] = useState(false); const boxClick = () =>{ setClickStatus(!clickStatus); }; return ( <div className='box'> <div className={classnames({ 'box-content': true, 'box-content-color': clickStatus, })} onClick={boxClick} > Hello,Jack! </div> </div> ); } export default App;
App.less代碼
/*{App組件less樣式}*/ .box { width: 100vw; height: 30vh; .unity(); flex-direction: column; } /*{通一less樣式}*/ .unity{ display: flex; justify-content: center; align-items: center; } /*content-靜態樣式*/ .box-content{ background: #33a579; margin-top: 20px; color: black; font-size: 3vmin; font-weight: 700; border-radius: 1vmin; cursor: default; } /*content-動態樣式*/ .box-content-color{ color: gold; }
測試結果
總結
分享在實際項目中一個很實用的classnames模塊庫，可以簡單快捷的去實現動態增減樣式。