在React Bootstrap按钮组件中有条件地呈现的JavaScript模板字符串中插入\n以断开行无效

mdfafbf1 于 2023-01-29 发布在 Java

关注(0)|答案(1)|浏览(85)

我的React组件的一部分是由React Bootstrap Button组件组成的，在这个组件中，我根据字符串的切换状态有条件地呈现字符串，如以下代码所示：

<Button 
                size="sm"
                className={!toggleBoolean ? 'clickable block' : 'cancel clickable block'}
                onClick={()=>setToggleBoolean(!toggleBoolean)}
            >
                {!toggleBoolean ? `[${publicCommunication.date}]\n《${publicCommunication.title}》`: '关'}
            </Button>

正如你所看到的，我包含了\n，因为我想把日期和标题放在按钮的单独的行上，为此我也把它显示为一个块（而不是默认的inline-block）。应用程序运行时没有错误，样式也被应用了。但是，有条件地呈现的字符串仍然出现在连续的一行上，如下图所示：

我能做些什么来解决这个问题？（既不插入
也没有html实体-即使在按钮上启用它们-也没有任何帮助）。作为依赖项，我使用"bootstrap"："^5.2.3"和"React Bootstrap 法"："^2.7.0版本"。
谢谢你的帮忙!

JavaScript

来源：https://stackoverflow.com/questions/75268662/inserting-n-to-break-line-in-javascript-template-string-conditionally-rendered

1条答案

按热度按时间

wecizke31#

这是CSS如何 Package 文本的问题。但是如果你只是想换行，你可以使用<br/> html标签。你可以参考下面的代码：

<Button 
                size="sm"
                className={!toggleBoolean ? 'clickable block' : 'cancel clickable block'}
                onClick={()=>setToggleBoolean(!toggleBoolean)}
            >
                {!toggleBoolean ? <>`[${publicCommunication.date}]`<br/>`《${publicCommunication.title}》`</>: '关'}
            </Button>

赞(0）回复(0）举报 2023-01-29

我来回答

在React Bootstrap按钮组件中有条件地呈现的JavaScript模板字符串中插入\n以断开行无效

1条答案

相关问题

热门标签

最新问答