React Bootstrap Button模板字符串\n换行无效问题求助

我有一个包含React Bootstrap Button的组件，根据toggleBoolean状态切换显示内容，代码如下：

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

我添加\n是想让日期和标题分两行显示，按钮已经设置了block样式，但换行没生效。尝试插入<br>及HTML实体也没用，当前依赖版本是bootstrap^{5.2.3、react-bootstrap}2.7.0，求解决换行问题的方法。

解决方案 #

方法1：用JSX片段拆分内容 #

React不会解析字符串中的<br>标签，需要用JSX语法直接拆分内容：

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

通过React片段(<>)包裹两个文本节点，<br>会被正确渲染为换行符。

方法2：通过CSS让\n生效 #

如果想保留字符串中的\n，给按钮添加CSS样式启用换行解析：

.clickable.block {
    white-space: pre-line;
}

这个属性会将字符串中的\n解析为换行，同时自动合并多余空格，适合需要保留原始换行符的场景。

方法3：用块级元素包裹多行内容 #

将多行内容放在<div>等块级元素内，更灵活控制排版：

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

内容的提问来源于stack exchange，提问作者Stefano