因为react理念是反对直接才做DOM的,完全使用数据驱动DOM做出渲染。习惯了锋利的JQuery的我们如何在表格里直接操作某一项呢?
举例:要将小于100分的单元格字体标红?如何操作?
直接贴代码,如下:
const columns = [ { title: '指标',dataIndex: 'kpi_name',key: 'kpi_name' },{ title: '预期',dataIndex: 'kpi_target',key: 'kpi_target',},{ title: '实际',dataIndex: 'kpi_finish',key: 'kpi_finish',{ title: '评分',dataIndex: 'kpi_score',key: 'kpi_score',render: (text,record) => { return ( text < 100? ( <span style={{color:'red'}}>{text}</span> ) : <span>{text}</span> ); } }];
那么在评分这一列,一旦出现低于100分的数据,该数字的字体颜色就会变红。
举例2:要是操作这一列的表头怎么办?
简单粗暴的直接写,如下:
{ title: <div style={{color:'red'}}>评分</div>,}
方法小结:
直接在数据里写方法做渲染,让数据去驱动DOM做出改变。
react路漫漫,趟过所有坑才能到达彼岸
原文地址:https://www.jb51.cc/react/302335.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。