如何将html中的这些内联样式转换为react？

Question

嗨，在 html 中，人们使用这些样式来制作动画。 我实际上是在关注 alphadex Link 的笔。

我以前从没见过这样的 HTML 写法

<div class="lines">
    <div class="line" style="--i: 1;"></div>
    <div class="line" style="--i: 2;"></div>
    <div class="line" style="--i: 3;"></div>
    <div class="line" style="--i: 4;"></div>
  </div>

我正在尝试将其更改为 react 组件。我可以更改类名，但是 不知道怎么转换样式？

这是反应组件

<div className="lines">
    <div className="line"></div>
    <div className="line"></div>
    <div className="line"></div>
    <div className="line"></div>
</div>

Answer 1

据我所知，您可以像这样在 React 中进行内联样式：

<div className="lines">
   <div className="line" style={{--i: 1}}></div>
   <div className="line" style={{--i: 2}}></div>
   <div className="line" style={{--i: 3}}></div>
   <div className="line" style={{--i: 4}}></div>
</div>

来源：https://www.w3schools.com/react/react_css.asp

编辑：也许你必须改用{{--i: "1"}}。

Answer 2

您需要将 {{}} 添加到您的样式中。并将css属性转换为camelcase。示例如下：

<div
            style={{
              width: '100%',
              backgroundColor: '#f1f1f1',
              display: 'flex',
              justifyContent: 'center',
            }}
          >
            test
          </div>

Answer 3

将它们包装为类

.i-1 {
    --i: 1;
}
.i-2 {
    --i: 2;
}
 ....

<div className="lines">
    <div className="line i-1"></div>
    <div className="line i-2"></div>
    <div className="line i-3"></div>
    <div className="line i-4"></div>
</div>