React项目中AntD表格单元格添加图标报错求助

我来帮你搞定这两个问题，其实都是对Column组件的render属性用法理解有误导致的，咱们一步步来修正：

错误原因分析与修复 #

1. Unexpected use of 'status'错误 #

你直接在render里写了status === 'locked'，但这里的status并没有被声明为render函数的参数。AntD的Column组件的render函数会自动传入三个参数：

• 第一个参数是当前dataIndex对应的字段值（也就是你数据源里的status）
• 第二个是整行的record对象
• 第三个是行的index索引

所以你需要先把这个参数接收进来，比如写成render={(status) => ...}，这样才能正确引用这个状态值。

2. 类型不匹配错误No overload matches this call #

你现在的写法是直接把三元表达式的结果（一个React元素）赋值给了render属性，但AntD要求render必须是一个函数——这个函数接收上面说的三个参数，最后返回React元素（ReactNode）。你相当于直接传了元素，而不是返回元素的函数，所以才会触发类型不匹配的报错。

修正后的完整代码 #

<Column 
  title="Status" 
  dataIndex="status" 
  key="status" 
  render={(status) => (
    status === 'locked' 
      ? <span><Icon type="lock" /></span> 
      : <span><Icon type="unlock" /></span>
  )} 
/>

如果之后需要用到整行的其他数据，也可以把record参数加上，比如：

render={(status, record) => {
  // 这里可以访问record里的其他字段，比如record.id
  return status === 'locked' ? <span><Icon type="lock" /></span> : <span><Icon type="unlock" /></span>
}}

内容的提问来源于stack exchange，提问作者Tatenda