ReactJs 中的条件 svg 内联样式

Question

我是否正确地执行了条件内联。 这个 svg 是一个 x 符号，并切换以使其成为 + 符号。

      <svg viewBox='0 0 26 26' focusable='true' style={toggleShow ? {  transform: translateY(-50%) rotate(-45deg) }  : null; } >
        <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>

Answer 1

@Joeffrey Chaucer，没错，但是您需要在转换值周围添加单引号。

 <svg viewBox='0 0 26 26' focusable='true' style={toggleShow ? {  transform: 'translateY(-50%) rotate(-45deg)'}  : null} >
    <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>