试试这个

return(
  <div className="widget">
      <div className="left">
          <span className="title">{data.title}</span>
          <span className="counter">{data.amount}</span>
          <span className="link">{data.link}</span>
      </div>
      <div className="right">
          <div className="percentage positive">

              {
                data.increase? 
                  <>
                    <KeyboardArrowUpIcon/> 20
                  </> : 
                  <>
                    <KeyboardArrowDownIcon/> -13
                  </>
              }
          </div>
          {data.icon}
      </div>
  </div>
);

它不起作用的原因是，您试图用一个数组连接组件示例，结果是Object对象

这个表达式没有任何意义：

<KeyboardArrowUpIcon/> + ["20"]

你正试图将一个组件添加到一个数组中，这两个东西都不能被有意义地添加到任何东西中，结果只是引擎将它们转换成字符串并将它们连接起来。
如果目标只是输出组件和字符串"20"，那么你可以简单地输出它们。对于JSX语法，你只需要把它们 Package 在一个封闭的元素中：

<><KeyboardArrowUpIcon/>20</>

为清楚起见，有空格：

<>
  <KeyboardArrowUpIcon/>
  20
</>

每个React节点都需要在一个容器下。你需要将你的逻辑 Package 在一个div或React.Fragment（简称为〈〉〈/〉）中。

{(data.increase) ? 
(<>
<KeyboardArrowUpIcon/> + ["20"]
</>) 
: (<>
<KeyboardArrowDownIcon/> + ["-13"]
</>)}

但我仍然不明白为什么你用方括号为20和-13？我不知道你的应用程序的逻辑，但我觉得你的代码可能是这样的。

{(data.increase) ? 
(<>
<KeyboardArrowUpIcon/>
<div>20</div>
</>) 
: (<>
<KeyboardArrowDownIcon/>
<div>-13</div>
</>)}

我希望这是你想要的答案。