React - 工具提示使用字符串连接返回新行答案

【问题标题】：React - Tooltip Return New Line Using String ConcatenationReact - 工具提示使用字符串连接返回新行
【发布时间】：2020-06-22 18:31:29
【问题描述】：

我试图弄清楚如何使用正确的字符串连接使工具提示标题出现在多行上。

这就是现在的样子：

First Name: John Last Name: Doe

这就是我正在尝试的工具提示：

First Name: John
Last Name: Doe

我正在使用 Material UI/样式化组件。

我已经尝试使用 'whitespace' 和 multiline={true} 设置工具提示的样式，并尝试了 &#13;&#10; 和 '\n' 但它不起作用。我认为这是一个特殊情况，所以我不确定如何做到这一点。

非常感谢任何帮助！谢谢

<StyledToolbar>
        <StyledButtonsContainer>
                <IconButton>
                    <Tooltip title={`First Name: ${firstname}` + '\n' + `Last Name:${lastname} `}>
                        <AccountCircleIcon />
                    </Tooltip>
                </IconButton>
        </StyledButtonsContainer>
</StyledToolbar>

【问题讨论】：

标签： javascript tooltip styled-components string-concatenation carriage-return

【解决方案1】：

试试这个：

<Tooltip title={<>First Name: {firstname}<br/>Last Name: {lastname}</>}>
  <AccountCircleIcon />
</Tooltip>

【讨论】：

我确实收到了关于格式的错误：“Missing parentheses around multilines JSX” 解决方案是在之前和之后添加括号