如何在HeroUI/NextUI动态表格中访问嵌套属性？

你可以通过实现一个支持嵌套路径解析的自定义函数来替代官方的getKeyValue，具体步骤如下：

1. 实现嵌套属性获取函数 #

写一个能按.分割的路径逐层访问对象属性的函数，同时处理中间属性不存在的情况以避免报错：

const getNestedValue = (obj: any, path: string) => {
  return path.split('.').reduce((current, key) => {
    return current && current[key] !== undefined ? current[key] : '';
  }, obj);
};

2. 替换表格中的取值逻辑 #

把原来调用getKeyValue的地方换成自定义的getNestedValue即可：

// imports ...
// nextjs page component...

interface Album {
  name: string;
}

interface Track {
  name: string;
  album: Album;
  id: string; // 补充id类型，原代码中用到了item.id
}

const tableColumns = [
  { label: "标题", key: "name" },
  { label: "专辑", key: "album.name" },
];

const [tracks, setTracks] = useState<Track[]>();

// fetch tracks ...

const getNestedValue = (obj: any, path: string) => {
  return path.split('.').reduce((current, key) => {
    return current && current[key] !== undefined ? current[key] : '';
  }, obj);
};

return (
  <Table className="table-auto">
    <TableHeader columns={tableColumns}>
      {(column) => (
        <TableColumn key={column.key}>{column.label}</TableColumn>
      )}
    </TableHeader>
    <TableBody items={tracks}>
      {(item) => (
        <TableRow key={item.id}>
          {(columnKey) => (
            <TableCell>{getNestedValue(item, columnKey)}</TableCell>
          )}
        </TableRow>
      )}
    </TableBody>
  </Table>
);

3. 可选：类型安全版本（进阶） #

如果需要在编译时检查路径合法性、避免拼写错误，可以用泛型实现类型安全的版本：

type Path<T> = T extends object ? {
  [K in keyof T]: K extends string ? `${K}` | `${K}.${Path<T[K]>}` : never
}[keyof T] : never;

const getNestedValue = <T, P extends Path<T>>(obj: T, path: P) => {
  return path.split('.').reduce((current, key) => {
    return current && current[key as keyof typeof current];
  }, obj);
};

使用这个版本时，columnKey的路径会被TypeScript校验，比如输入album.nme这类错误路径会直接在编译阶段报错。

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