如何在 React jsx 中设置内联样式

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}`
                      }
          />

    )
}