概述

没有系统学习过前端或React，遇到问题都是Google，此文记录一下React的使用笔记。

table td超长时显示省略号

下面给出2个示例：

import styles from "../templateImg/style.less";
{
    title: '素材名称',
    dataIndex: 'fileName',
    render: text => <div className={styles.ellipsis} title={text}>{text}</div>,
},
{
  title: '失败原因',
  dataIndex: 'errorLog',
  render: (text: string, record: any) =>
    (<Tooltip title={text}>
    <div className={styles.errorLog}>{text}</div>
  </Tooltip>)
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  width: 180px;
}
.errorLog {
  width: 200px;
  padding: 10px 0 10px;
  overflow: hidden; //超出的文本隐藏
  white-space: nowrap; //溢出不换行
  text-overflow: ellipsis; //溢出用省略号显示
}

render columns render text

React Ant Design开发有个固定的架子，比如对于渲染的列表，通过columns来定义若干个列表字段：

{
    title: '账户ID',
    dataIndex: 'advertiserId'
}

然后对于某一个column如果有特殊的处理逻辑，可以写一个render函数

render: (text, record) => {
    if (text === "" || text == null) {
        return null;
    }
    // text是当前字段,相当于dataIndex;record是当前记录,text是record其中一个属性
    // 如果text数据有多层\转义字符,则需要使用多次JSON.parse()
    return JSON.parse(JSON.parse(text)).partner_name;
}