如何避免在 React 片段中断行

Question

我有以下生成片段的函数：

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

然后，我在一段 HTML 中使用该函数

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

我期望得到以下输出：

<div>
   here is xxx yyy.
</div>

但浏览器调试的结果如下：

<div> (flex)
"here is "
"xxx"
<i>yyy</i>
"."
</div>

我试图用<span className="nowrap">包裹

span .nowrap {
    white-space: nowrap;
  }

没有成功。

有人可以提供一些帮助吗？

Answer 1

检查员只是向您显示文本节点。 您可以连接其中一些节点，但在句点和文本的第一部分之间有一个元素节点。 没有办法解决这个问题。

{first}{first.indexOf("\'") > 0 ? "" : " "}

可以写成：

{`${first}${first.indexOf("\'") > 0 ? "" : " "}`}

但就像我说的，最后一个. 将是<i>元素之后的文本节点。

话虽如此，浏览器（如在文档视口中）应该显示这些文本节点而没有换行符。