React框架下SVG条件行内样式的写法正确性咨询

你的写法存在3处核心问题，修正方案如下： #

问题列表 #

• 语法错误1：样式对象中的transform取值必须是字符串格式，你原本的写法没有加引号，会被JS识别为未定义变量直接抛出报错
• 语法错误2：JSX的style属性只能接收对象类型值，你原本的三元分支返回null会导致解析异常，需要替换为空对象{}
• 语法错误3：三元表达式闭合大括号前多余了分号，不符合JSX语法规范

优化建议 #

如果仅需要实现叉号转加号的效果，不需要额外加translateY偏移，仅保留旋转属性即可，也可以按需添加过渡属性让切换动画更流畅。

修正后代码 #

<svg 
  viewBox='0 0 26 26' 
  focusable='true' 
  style={toggleShow ? { 
    transform: 'rotate(-45deg)',
    transition: 'transform 0.2s ease' // 可选：添加平滑过渡效果
  } : {
    transition: 'transform 0.2s ease' // 可选：添加平滑过渡效果
  }} 
>
  <path d='M10.5 9.3L1.8 0.5 0.5 1.8 9.3 10.5 0.5 19.3 1.8 20.5 10.5 11.8 19.3 20.5 20.5 19.3 11.8 10.5 20.5 1.8 19.3 0.5 10.5 9.3Z'></path>
</svg>

如果你确实需要translateY做垂直居中调整，只要把对应的内容放到transform的字符串里即可：

transform: 'translateY(-50%) rotate(-45deg)'

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