Question

我有以下代码将React子映射到一个类型化数组：

const mappedChildren = React.Children.map(children, child => {
  if (child instanceof TableColumn) {
    return child as TableColumn;
  }
  return;
});

mappedChildren的类型为(TableColumn | undefined)[]。我现在想要过滤掉未定义的值。我正在使用以下内容：

const columns: TableColumn[] = mappedChildren.filter(child => !!child);

我收到以下错误：

Type'（TableColumn | undefined）[]'不能分配给类型 'O3TableColumn []'。输入'TableColumn | undefined'不可分配给输入'TableColumn'。类型'undefined'不能分配给类型 'TableColumn的。

Answer 1

根据评论中的建议，您不应该map两次。

而是使用filter来获取您关注的项目，而忘记在代码中处理undefined。

const columns: TableColumn[] = React.Children.toArray(children).filter(child => {
  return child instanceof TableColumn;
});

Answer 2

只要您愿意丢失所有 falsey 项目，您就可以使用：

const columns: TableColumn[] = <TableColumn[]>mappedChildren.filter(child => !!child);

简化示例...如果您在一次点击中执行此操作，使用其他人在评论中建议的filter，如果您启用了严格的空检查，则可能仍需要类型断言：

const arr: (string | null)[] = [];
arr.push('string');
arr.push(null);
arr.push('string');

console.log(arr);
const filtered: string[] = <string[]>arr.filter((item) => { return typeof item === 'string'; });
console.log(filtered);

Answer 3

最终，通过在扩展的接口中显式定义组件的children属性，我能够实现我所需要的：

export interface TableProps {
  children: React.ReactElement<TableColumnProps>[];
}

无法从数组

3 个答案: