React：如何在同一条件下渲染数值与组件

你遇到的问题是因为在JSX里不能直接用+把字符串和React组件拼接——组件本质是JS对象，拼接时会被转成[object Object]，所以才出现错误输出。

不需要给每个元素单独加条件，只要把要渲染的内容放在同一个条件返回块里就行，给你两种可行写法：

写法一：使用JSX片段（无额外DOM节点） #

<div>
  {values.cost && values.price ? (
    <>
      {values.gain}€
      <Button aria-label="copy1"><MdIcons.MdContentCopy/></Button>
    </>
  ) : ""}
</div>

写法二：用span包裹（生成额外DOM节点，适合需要统一样式的场景） #

<div>
  {values.cost && values.price ? (
    <span>
      {values.gain}€
      <Button aria-label="copy1"><MdIcons.MdContentCopy/></Button>
    </span>
  ) : ""}
</div>

核心逻辑就是：条件满足时，返回包含文本和组件的JSX内容，而不是把它们当成字符串拼接。

内容的提问来源于stack exchange，提问作者Germán