Question

我创建了一个反应组件，它将一个数组并将所有进度条堆叠成一个。

const ProgressBar = (props, {...customProps}) => {

    const GroupProgressBar = [];
    props.groups.map((group, i) => {

      const widthValue = (group.value / group.max) * 100;

      GroupProgressBar.push

      (<div style={{width: `${widthValue}%`}}
      key = {i}

      className={`well-background--${group.concept}
                  animation
                  terra-ProgressGroup--progress
                  terra-ProgressBar--${props.heightSize}`}>

        </div>);
    })

    return <div className='terra-ProgressGroup'> {GroupProgressBar} </div>
}

CSS（下面的类我要转换为单个类）：

...

.well-background--concept1 {
  animation-delay: 1s;
  z-index: -1;
}
.well-background--concept2 {
  animation-delay: 2s;
  z-index: -2;
}
.well-background--concept3 {
  animation-delay: 3s;
  z-index: -3;
}

我试图将这些类转换成一个但没有运气

:root {
  --concept-code: key;
  --concept-code2: key;
}

.animation {
  animation-delay: var(--concept-code)s;
  z-index: var(--concept-code2);
}

基本上我不想继续添加那些类似的类，所以我试图创建一个单独的类并从反应组件传递这些数字。可能使用key = {i}

我如何实现这一目标？

Answer 1

为什么在这种情况下甚至为CSS烦恼？ CSS的重点是样式级联并具有层次结构。如果样式仅适用于特定的React组件，则最好直接呈现相应的样式。

to_i(2)

请注意，我不确定如何为您的样式生成适当的数字，因为我不知道您的数据结构。但那将是微不足道的。重要的部分是在组件中渲染样式而不是CSS。

使用React动态地将CSS类样式定义注入到页面中并不是一个很好的方法。即便如此，对于这个问题来说，这将极大地过度设计解决方案。最好只在CSS中手动创建大量的to_s(16)类定义，就像你认为你需要的那样多（10？20？真的会有多少？）。

从react循环获取索引值并将其传递给css

1 个答案: