在 React Bootstrap Button 组件中有条件地呈现的 JavaScript 模板字符串中插入 \n 以换行是无效的

Question

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

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

如您所见，我包含了 \n 是因为我想将日期和标题放在按钮的不同行上，为此我也将其显示为一个块（而不是默认的内联块）。 应用程序运行无误，并且应用了样式。 但是，条件渲染的字符串仍然出现在连续的一行上，如下面的屏幕截图所示：

我该怎么做才能解决这个问题？ （既不插入
html 实体——即使在按钮上启用它们——也没有任何帮助）。 作为依赖项，我使用“bootstrap”：“^5.2.3”和“react-bootstrap”：“^2.7.0”。

谢谢你的帮助！

Answer 1

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

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