您不需要为每个文本值提供一个片段：string是ReactNode，因此可以将它们作为裸子对象包含在<span>中。
下面发生的事情是，第一项的value被追加到一个数组中，然后每个后续项的value被追加到span元素中的逗号后面，形成了一个逗号居中的列表。
参考：Array.prototype[@@iterator]()
TSPlayground代码

body { font-family: sans-serif; }
.syntax-operator { background-color: red; color: white; }

<div id="root"></div><script src="https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.development.js"></script><script src="https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.development.js"></script><script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.20.15/babel.min.js"></script><script>Babel.registerPreset("tsx", {presets: [[Babel.availablePresets["typescript"], {allExtensions: true, isTSX: true}]]});</script>
<script type="text/babel" data-type="module" data-presets="tsx,react">

import {type ReactElement, type ReactNode} from "react";

// This Stack Overflow snippet demo uses UMD modules
const {StrictMode} = React;

type Item = {
  id: number;
  value: string;
};

function ItemsAsText ({items}: { items: readonly Item[] }): ReactElement {
  const iter = items[Symbol.iterator]();
  const firstResult = iter.next();
  if (firstResult.done) return (<span></span>);

  const results: ReactNode[] = [firstResult.value.value];

  for (const {id, value} of iter) {
    results.push((<span key={id} className="syntax-operator">, </span>), value);
  }

  return (<span>{results}</span>);
}

const items: Item[] = [
  {id: 1, value: "foo"},
  {id: 2, value: "bar"},
  {id: 3, value: "baz"},
];

const reactRoot = ReactDOM.createRoot(document.getElementById("root")!);

reactRoot.render(
  <StrictMode>
    <ItemsAsText items={items} />
  </StrictMode>
);

</script>