现有Preact的项目，其中用到了css去加载图片
对应代码为：
index.js
import { h, Component } from ‘preact’; import style from ‘./style.less’; export default class CurMonthNum extends Component { render() { const curMonthNumArr = this.props.curMonthNumArr; return ( <div class={style.home_ring}> <ul class=”clearfix”> <li> <div class={style.nn_huan01} /> <span>{ curMonthNumArr[0] }</span> <p>发情</p> </li> <li> <div class={style.nn_huan02} /> <span>{ curMonthNumArr[1] }</span> <p>配种</p> </li> <li> <div class={style.nn_huan03} /> <span>{ curMonthNumArr[2] }</span> <p>孕检</p> </li> <li> <div class={style.nn_huan04} /> <span>{ curMonthNumArr[3] }</span> <p>异常</p> </li> </ul> </div> ); } } |
style.less
.nn_huan01, .nn_huan02, .nn_huan03, .nn_huan04 { margin: 0 auto; display: inline-block; width: 1.8rem; height: 1.8rem; } .nn_huan01 { background: url(/assets/quan_01.png) no-repeat; background-size: 1.8rem 1.8rem; } .nn_huan02 { background: url(/assets/quan_02.png) no-repeat; background-size: 1.8rem 1.8rem; } .nn_huan03 { background: url(/assets/quan_03.png) no-repeat; background-size: 1.8rem 1.8rem; } .nn_huan04 { background: url(/assets/quan_04.png) no-repeat; background-size: 1.8rem 1.8rem; } |
然后希望可以把index.js中的内容，弄成类似于另外一个index.js中map形式的：
export default class GradientBars extends Component { render() { const data = this.props.data; return ( <div class={style.gradientBars}> <ul class=”clearfix”> { data.map(({ text, number }) => { return ( <li> { text } { number ? <span>{number}</span> : null } </li> ); }) } </ul> </div> ); } } |
从而实现：
上述的代码很简洁，然后传入的内容只需要是一个字典
然后对应的css写成类似于：
.nn_huan0N { margin: 0 auto; display: inline-block; width: 1.8rem; height: 1.8rem; } .nn_huan0N { background: url(/assets/quan_0N.png) no-repeat; background-size: 1.8rem 1.8rem; } |
其中N表示整数
就好了。
去研究看看，是否有这种解决办法。
是否有css中可以批量动态命名style的
后者是正则表达式去匹配命名的
css style 动态命名
用于动态命名的输入元素的CSS样式_CSS styles for input elements named dynamically_代码错误
命名规则 – CSS规范 – 规范 – NEC : 更好的CSS样式解决方案
关于 ” 绑定内联样式 ” 一节中，CSS属性名命名约定问题 · Issue #1931 · vuejs/vue
JavaScript实现动态创建CSS样式规则方案
css style batch name
css3 – How do I batch CSS selectors together? – Stack Overflow
没太看懂。
算了。估计没有这种技术，暂时放弃。
转载请注明：在路上 » 【无法解决】Preact中css是否支持批量动态命名或正则匹配