最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【无法解决】Preact中css是否支持批量动态命名或正则匹配

Preact crifan 1693浏览 0评论

现有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样式规则方案&nbsp;&nbsp;

css style batch name

javascript – Is there a way to apply multiple CSS styles in a batch to avoid multiple reflows? – Stack Overflow

css3 – How do I batch CSS selectors together? – Stack Overflow

没太看懂。

算了。估计没有这种技术,暂时放弃。

转载请注明:在路上 » 【无法解决】Preact中css是否支持批量动态命名或正则匹配

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
83 queries in 0.177 seconds, using 22.04MB memory