React条件渲染中图标显示为对象而非图标组件的问题求助

嘿，我遇到一个React条件渲染的小问题，想请大家帮忙看看！

情况是这样的：当我在JS条件语句里添加图标组件时，图标并没有正常显示出来，反而变成了一个对象。我写的代码是这样的：

{!signUp ? `${(<FcGoogle />)}` + "Signin With Google": `${(<FcGoogle />)} SignUp With Google`}

现在图标完全不显示，页面上只会看到类似[object Object] Signin With Google这样的内容，有没有大佬知道怎么解决呀？

问题原因分析 #

其实你这里犯了一个常见的小错误：把React组件（<FcGoogle />）放进了模板字符串里。React组件本质是一个JSX对象，当你用${}把它插入模板字符串时，会自动调用它的toString()方法，结果就是[object Object]，自然看不到图标啦。React组件是不能直接和字符串拼接的，得用JSX的语法来组合元素。

解决方案 #

给你两种可行的写法，都能解决这个问题：

方法1：用React.Fragment包裹元素

直接用JSX的条件渲染，把图标和文本用<>（React.Fragment的简写）包裹起来，不用模板字符串：

{!signUp ? (
  <>
    <FcGoogle /> Signin With Google
  </>
) : (
  <>
    <FcGoogle /> SignUp With Google
  </>
)}

方法2：抽离重复的图标组件

因为图标部分是重复的，我们可以把它单独提出来，只根据条件切换文本内容，这样代码更简洁：

<>
  <FcGoogle />
  {!signUp ? "Signin With Google" : "SignUp With Google"}
</>

这样修改后，图标就能正常渲染出来啦，文本也会根据signUp的状态正确切换~

备注：内容来源于stack exchange，提问作者ibrahim ramy