React前端库，table中的每列内容，进行强制换行的解决方法

1.问题描述：
管理系统的前端实现用的是React+ant design，但是React的table，每列的值，如果用<br />或者/r/n 来实现，则还是换行无效。如下图，SN值是多个以分号分隔的值，现在希望多个sn值能分行显示，将分号替换成 <br />或者/r/n ，列值就变成了"value1 <br />value2 " 或者"value1 /r/n value2"，还是换行无效。也就是单元格换行无效。



2. 问题原因：
因为和其他的前端库不同，例如easyUI或者bootstrap，React中的table的单元格，利用后端返回的列值，直接替换字符串中的分隔符为<br>或者/r/n来换行，是无效的。

3.解决方法：
将前端代码的table的column代码中，要换行的那列，配置render属性，将标签<br></br>和每个显示值 混搭的方式，返回给列来显示（千万不能把标签放到引号里面，否则不识别其是标签）。
（1）截图如下：



（2）代码如下：
columns: [
{
title: '服务器IP',
dataIndex: 'ip',
}, {
title: 'SN',
dataIndex: 'sn',
render: (text, record) =>{
let snArray=[];
snArray=text.split(";");

let br=<br></br>;
let result=null;
if(snArray.length<2){
return text;
}

for(let i=0;i<snArray.length;i++){
if(i==0){
result=snArray[i];
}else{
result=<span>{result}{br}{snArray[i]}</span>;
}
}
return <div>{result}</div>;
}
}, {
title: '服务',
dataIndex: 'pathName'
}, {
title: '级别',
dataIndex: 'priority',
render: function (data) {
if (data === 0) {
return <Badge status="error" text="Critic"/>
} else {
return <Badge status="warning" text="Warning"/>;
}
}
}, {
title: '创建时间',
dataIndex: 'creatDate',
render: function (data) {
return moment(data).format("YYYY-MM-DD HH:mm:ss");
}
}]