从反应循环中获取索引值并将其传递给 css

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 组件，那么最好直接渲染相应的样式。

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

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

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

      GroupProgressBar.push

      (<div 
      style={{
          width: `${widthValue}%`,
          animationDelay: /* based on the concept number */,
          zIndex: /* based on the concept number */
      }}
      key = {i}

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

        </div>);
    })

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

请注意，我不确定如何为您的风格生成合适的数字，因为我不知道您的数据结构。但这已经足够微不足道了。重要的部分只是在组件中渲染样式而不是 CSS。

使用 React 将 CSS 类样式定义动态注入页面并不是一个很好的方法。即便如此，这将大大过度设计解决此问题的解决方案。最好只手动在 CSS 中创建大量 .well-background 类定义，只要您认为您需要的数量（10 个？20 个？真的有多少个？）。