如何解决React Fragment中内容在flex布局下自动换行的问题？

• 外层<Row>组件渲染的是flex布局的div，flex容器会将所有直接子节点（包括零散文本节点、独立元素节点）都识别为单独的flex项，默认分开排版。你编写的f函数用React Fragment返回了3个独立节点（first文本、空格、<i>元素），加上外层的here is 和.，总共有5个独立flex项，自然会被拆分换行。
• 你编写的CSS选择器存在错误：span .nowrap中间的空格属于后代选择器，匹配的是span元素内部类为nowrap的后代元素，你实际需要匹配带nowrap类的span，应该去掉空格写为span.nowrap，或直接写.nowrap匹配所有带该类的元素。

1. 不要用React Fragment包裹f函数的返回内容，改为用带nowrap类的span包裹，避免返回的内容被拆分为多个独立节点：

const f = (first, last) => {
  return (
    <span className="nowrap">
      {first}{first.indexOf("'") > 0 ? "" : " "}<i>{last}</i>
    </span>
  )
}

2. 修正CSS样式：

.nowrap {
  white-space: nowrap;
}

3. 如果你需要整行内容都不拆分换行，可以将<Row>内的所有内容统一用nowrap类的span包裹：

<Row>
  <span className="nowrap">here is {f("xxx","yyy")}.</span>
</Row>

内容的提问来源于stack exchange，提问作者Paolo Di Pietro