React内联样式三元表达式失效问题求助

我需要实现一个滑块组件：点击「>」或「<」按钮时，底部的白色进度条边框能左右滑动。目前已经能通过style属性绑定CSS变量，但进度条滑动效果完全不生效。

滑块效果说明：组件底部有一条白色进度条，进度条长度为容器的1/N（N为滑块总数量），通过调整进度条的right属性值实现滑动定位。

错误原因 #

看你写的JSX代码：

<div className="slider__progressBar"
    style={{
        "--progressBar-width": `calc(100% / ${dataSlider.length})`,
        "--progressBar-right": `${i.id <= 1} ? "0" : "calc((100% / ${dataSlider.length}) * ${i.id}))"`
    }}
>

这里的核心问题是三元表达式没有被正确执行：你把i.id <=1的布尔结果（比如true）和后面的字符串直接拼接，最终生成的CSS变量--progressBar-right的值是true ? "0" : "calc(...)，这是无效的CSS值，浏览器无法解析。

修正代码 #

你需要让JavaScript先执行三元表达式，再把计算结果赋值给CSS变量，正确写法如下：

<div className="slider__progressBar"
    style={{
        "--progressBar-width": `calc(100% / ${dataSlider.length})`,
        "--progressBar-right": i.id <= 1 ? "0" : `calc((100% / ${dataSlider.length}) * ${i.id})`
    }}
>

另外注意：原来的calc表达式末尾多了一个冗余的)，必须去掉，否则会导致CSS语法错误。

验证效果 #

修正后，当i.id <=1时，元素的style属性会变成：

<div class="slider__progressBar" style="--progressBar-width:calc(100% / 4); --progressBar-right:0;">

此时:after伪元素的right: var(--progressBar-right)会正确解析为right: 0，进度条就能定位到预期的顶部位置。

内容的提问来源于stack exchange，提问作者Madara uchi