0 ? "" : " "}{last} } -6ren">
gpt4 book ai didi

javascript - 如何避免在 React 片段中断行

转载 作者:行者123 更新时间:2023-12-05 05:54:21 25 4
gpt4 key购买 nike

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

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>

浏览器显示为:

here is
xxx
yyy (<- this in italic)
.

我试着用 <span className="nowrap"> 包裹起来与

span .nowrap {
white-space: nowrap;
}

没有成功。

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

最佳答案

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

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

可以写成:

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

但正如我所说,最后一个 .将是 <i> 之后的文本节点元素。

也就是说,浏览器(如在文档视口(viewport)中)应该显示这些没有换行符的文本节点。

关于javascript - 如何避免在 React 片段中断行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69650556/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com