如何在内联风格的ReactJS上添加字符串变量或——i:0属性?

Question

<li style="--i: 0">
<a href=""><ion-icon name="home-outline"></ion-icon></a>
</li>
<li style="--i: 1">
<a href=""><ion-icon name="person-outline"></ion-icon></a>
</li>
<li style="--i: 2">
<a href=""><ion-icon name="settings-outline"></ion-icon></a>
</li>
<li style="--i: 3">
<a href=""><ion-icon name="mail-outline"></ion-icon></a>
</li>
<li style="--i: 4">
<a href=""><ion-icon name="key-outline"></ion-icon></a>
</li>
<li style="--i: 5">
<a href=""><ion-icon name="videocam-outline"></ion-icon></a>
</li>
<li style="--i: 6">
<a href=""><ion-icon name="game-controller-outline"></ion-icon></a>
</li>
<li style="--i: 7">
<a href=""><ion-icon name="camera-outline"></ion-icon></a>
</li>

这是我的HTML文件，style="——i:0"to——i:7 property

<li style={--i: 0}>
<i className="fa fa-plus" aria-hidden="true"></i>
</li>

这是来自ReacJS的代码，给内联样式一个——i:0。并且获得"样式属性值"的错误必须是一个对象。有人能帮我应用我对HTML文件的例子在React内联样式?

Answer 1

在react中直接写样式，你必须这样做=><li style={{ ...properties }}></li>

我不知道你是否可以从react中访问自定义变量，你可以这样做。

<li style={`--i=${YOUR_VALUE}`}></li>

希望我能帮到你。

Answer 2

要实现transform: rotate(calc(360deg / 8 * var(--i)))的风格，请尝试

{let s = rotate(calc(360deg / 8 * var(--i))) // assume i has some value}
<li style={{transform: s }}></li>