需求背景: 描述内容过长,并且分类了,期望最终显示可以换行。
问题原因:Antd Tooltip 没有支持换行的api,当用户传过来的title值是string类型,它无法换行。
解决办法: 将需要换行的文字段由字符串转化成html,这样就可以处理换行。
举例:
没有换行
const { Tooltip } = antd;
ReactDOM.render(
<Tooltip title="一去二三里,烟村四五家。亭台六七座,八九十枝花。">
<span>Tooltip will show on mouse enter.</span>
</Tooltip>,
mountNode,
);
换行
const { Tooltip } = antd;
ReactDOM.render(
<Tooltip title={(<span> 一去二三里,烟村四五家。<br/>亭台六七座,八九十枝花。</span>)}>
<span>Tooltip will show on mouse enter.</span>
</Tooltip>,
mountNode,
);
解决要点:将字符串转化成html
desc: string | string[];
let title = Array.isArray(desc) ? desc.map(de => {
return (<span>{de}<br /></span>)
}): desc;