如何在JSX中基于三元运算符渲染SVG？（Stencil.js/React）

你遇到的所有问题，核心原因都是错误地在JSX中拼接元素与字符串——JSX要求每个分支必须返回单个合法的JSX元素（或片段），不能直接用模板字符串、空格等方式拼接JSX元素和文本。

错误原因拆解 #

• 错误1/4：iconSVG is not a function 或 iconSVG(...) is not a function：iconSVG ${this.label}``不是JSX的合法语法，JSX不支持用空格直接连接元素和字符串。
• 错误2：JSX要求单个元素：<svg>...</svg> ${this.label}``返回了两个独立内容，JSX不允许一个分支返回多个未包裹的元素。
• 错误3：显示[Object object]：模板字符串会把JSX对象转为字符串，因此出现[object Object]，这不是正确的渲染方式。

正确解决方案 #

在JSX中，若要返回多个元素（包括SVG和文本），必须用JSX片段（<></>）或容器元素（如<span>）包裹，确保每个分支返回单个元素。

方案1：直接用片段包裹分支内容

return (
  <button>
    {this.icon ? (
      this.position === 'left' ? (
        <>
          <svg>...</svg>
          {this.label}
        </>
      ) : (
        <>
          {this.label}
          <svg>...</svg>
        </>
      )
    ) : (
      this.label
    )}
  </button>
);

方案2：提取SVG为变量后拼接

如果SVG代码较长，可先定义为变量再使用：

const iconSVG = <svg>...</svg>;

return (
  <button>
    {this.icon ? (
      this.position === 'left' ? (
        <>
          {iconSVG}
          {this.label}
        </>
      ) : (
        <>
          {this.label}
          {iconSVG}
        </>
      )
    ) : (
      this.label
    )}
  </button>
);

方案3：简化嵌套三元（可选）

若觉得嵌套三元可读性差，可提前计算按钮内容：

const iconSVG = <svg>...</svg>;
let buttonContent = this.label;

if (this.icon) {
  buttonContent = this.position === 'left' 
    ? <> {iconSVG} {this.label} </> 
    : <> {this.label} {iconSVG} </>;
}

return <button>{buttonContent}</button>;

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