AntDesignPro：利用可选链操作符在JSX中映射数组

在AntDesign的ProTable组件中定义列的时候，存在有些列的内容是数组的类型，在使用render渲染的时候可以使用Array.map方法渲染每一个元素。

API返回的数据理想的格式像下面这个样子，我希望在ProTable中的设置一列展示节点所有的负责人。

{
  'node': {
    'pk': 23,
    'extension':{
      'owners':[
        {
          'name':'张三',
        },
        {
          'name':'李四',
        }
      ]
    }
  }
}

效果图

版本一：我首次写的代码

const columns = [
  {
    title: '负责人',
    dataIndex: ['node', 'extension', 'owners'],
    render: owners => (
      <Space>
        {owners.map(owner => (<a>{owner.name}</a>))}
      </Space>
    )
  },
]

出现如下错误

在排查时发现，有些节点没有数据，像下面这个样子。

{
  'node': null
}

版本二：兼容非数组的情景

  {
    title: '负责人',
    dataIndex: ['node', 'extension', 'owners'],
    render: owners => (
      <Space>
        {
          owners instanceof Array
            ? (owners.map(owner=>(<a>{owner.name}</a>)))
            : owners
        }
      </Space>
    )
  },

版本三：使用可选链操作符

可选链操作符的语法：

obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)

如下语句：

let nestedProp = obj.first?.second;

等价于：

let nestedProp = obj.first && obj.first.second;

函数调用时如果被调用的方法不存在，使用可选链可以使表达式自动返回undefined而不是抛出一个异常。

    {
      title: '负责人',
      dataIndex: ['node', 'extension', 'owners'],
      render: owners => (
        <Space>
          {owners.map?.(owner=>(<a>{owner.name}</a>))}
        </Space>
      )
    },

相关文档

Antd ProTable
https://procomponents.ant.design/components/table
​

MDN 可选链操作符
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining