如何避免TSX/JSX渲染生成多行HTML输出？

React 处理 JSX 时，会把每个独立的表达式（{foo}、{bar}）和文本片段（: ）视为单独的节点，再加上你编写 JSX 时的换行、缩进等空白字符，最终渲染到 DOM 时就会将这些节点分开输出，形成多行结构。本质是 JSX 里的空白会被解析为节点分隔标记，导致每个片段被单独渲染。

有两种简单可行的方式：

• 合并为单个表达式：用模板字符串把所有内容整合在一起，React 只会生成一个文本节点，输出自然是单行：

const FooBar = ({foo, bar}: {foo: string; bar: string}) => (
    <p>{`${foo}: ${bar}`}</p>
);

TypeScript 环境下要确保 foo 和 bar 是可转换为字符串的类型，避免类型错误。

• 消除 JSX 中的空白换行：把 <p> 标签内的内容写成一行，去掉表达式和文本之间的换行、缩进，React 就不会生成额外的空白节点：

const FooBar = ({foo, bar}: {foo: string; bar: string}) => (
    <p>{foo}: {bar}</p>
);

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