如何在三元运算符中组合React元素与文本？

Great question! I’ve run into this exact frustration before—there’s nothing more annoying than cluttering your DOM with random <span>s just to make React’s JSX parser play nice. Luckily, there are a couple of clean, wrapper-free solutions:

1. Use React.Fragment (The Best Option) #

React built a dedicated tool for this exact scenario: Fragment. It lets you group multiple JSX nodes together without rendering any extra DOM element. You can use either the concise "empty tag" syntax (most common in modern setups) or the explicit React.Fragment component:

{bar ? (
  <>
    <SomeComponent foo={bar} /> {foobar}
  </>
) : null}

If you’re working with an older React version or a build setup that doesn’t support the empty tag syntax, use the full Fragment syntax instead:

{bar ? (
  <React.Fragment>
    <SomeComponent foo={bar} /> {foobar}
  </React.Fragment>
) : null}

2. Return an Array of Nodes #

React 16+ allows you to return an array of JSX nodes directly, as long as each item has a unique key prop. This works if you prefer not to use Fragment for some reason:

{bar ? (
  [
    <SomeComponent key="component" foo={bar} />,
    ' ', // The space text node
    <span key="foobar-element">{foobar}</span>
  ]
) : null}

If foobar is a plain string, you can simplify it by combining the space and variable into one string node to cut down on keys:

{bar ? (
  [
    <SomeComponent key="component" foo={bar} />,
    ` ${foobar}` // Space + foobar as a single string node
  ]
) : null}

Quick Comparison #

• Fragment is the go-to choice: it’s purpose-built for this problem, requires no keys, and keeps your JSX clean.
• Arrays work well if you need granular control over individual nodes, but the mandatory key requirement adds a bit of boilerplate.

Both methods skip adding unnecessary wrapper elements to the DOM, so pick whichever fits your code style best!

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