内联样式的 JSX 模板文字

Question

我正在尝试在包含变量的元素上添加内联样式。

对值进行硬编码是有效的：

<circle style={{ strokeDasharray: "75, 25" }} ></circle>

但我需要一种方法让这种风格的两个数字都从变量中提取。

我尝试过各种花括号和反引号 - 我认为我需要模板文字，但不确定语法如何在这种内联样式似乎需要的双花括号内起作用。

这个

<circle style={`{strokeDasharray: "${ percent }, 25"}`} ></circle>

失败并显示消息：该styleprop 需要从样式属性到值的映射，而不是字符串。例如，style={{marginRight: spacing + 'em'}}当使用 JSX 时。

这个

<circle style={{`strokeDasharray: "${ percent }, 25"`}} ></circle>

导致构建完全失败。

这个

<circle style={{strokeDasharray: "`${ percent }`, 25"}} ></circle>

构建，但根本没有添加内联样式。

除了使用percent第一个数值的变量之外，我还需要计算第二个数值 - 它始终是 100 减去变量percent。

Answer 1

style={{strokeDasharray: `${percent},${100 - percent}`}}