Question

我正在尝试在react组件中应用内联样式，如下所示。这是设置样式的正确方法，如果不是，我怎么能实现这个？

  <div
    {...customProps}
    style={{ width: `${widthValue}%`,
      animationDelay: `${animationDelay}s`,
      zIndex: `${zIndex}`,
      animation: `loadbar ${incrementValue}s linear forwards`}}
    key={i}
    className={`well-background--${group.concept}
      well-GroupedProgressBar--progress
      well-GroupedProgressBar--${props.heightSize}`}
  />,

由于

Answer 1

您需要将obj传递给内联样式属性。你的代码是正确的，但你可以通过在渲染函数中准备样式对象来清理你的代码，如果它每次都在改变，如

render() {
    var style = {
      width: `${widthValue}%`,
      animationDelay: `${animationDelay}s`,
      zIndex: `${zIndex}`,
      animation: `loadbar ${incrementValue}s linear forwards`
    }
    return (
        <div
           {...customProps}
           style={style}
           key={i}
           className={`well-background--${group.concept}
                        well-GroupedProgressBar--progress
                       well-GroupedProgressBar--${props.heightSize}`
                      }
          />

    )
}

如何在反应jsx中设置内联样式

1 个答案: