环境:
1.react: 16
2.ant: 3.15
问题:table在webpack用了eslint情况下,会报错:Component definition is missing display name. 把eslint注释掉又不报错了
代码如下:
class Search extends Component {
// do something
}
// 说明一下,不继承Search类是不会报错的
class SearchAction extends Search {
constructor() {
this.state = {
fields: [
{
title: '客户类型',
dataIndex: 'customer_type',
key: 'show_customer_type'
},
{
title: '申请人/申请日期',
dataIndex: 'last_save_name',
key: 'last_save_name',
render: (text, record) => (
<Fragment>
<div>{record.last_save_name || '无'}</div>
<div>{record.last_save_time || '无'}</div>
</Fragment>
)
}
]
};
}
render{
const props = {
dataSource: this.state.fields,
className: 'table-cus'
};
return (
<div>
<Table {...props}>
{this.state.fields.map(elt => (
<Column
title={elt.title}
key={elt.key}
dataIndex={elt.dataIndex}
render={elt.render || (text => text)}
/>
)}
</Table>
</div>
);
};
}
目前我也不知道是什么原因,因为在table里,text和record两个参数是存在的。
可能是因为ant没做好兼容吧
最后我的解决办法是:直接用eslint-disable来注释掉报错的代码 (不得已而为之 = =)
/*eslint-disable*/
{
title: '申请人/申请日期',
dataIndex: 'last_save_name',
key: 'last_save_name',
render: (text, record) => (
<Fragment>
<div>{record.last_save_name || '无'}</div>
<div>{record.last_save_time || '无'}</div>
</Fragment>
)
}
/*eslint-disable*/