Javascript 作为数组而不是单个元素呈现的嵌入式表达式

我有以下嵌套组件：

<Table data={records}>
    <TableColumn field="code">Code</TableColumn>
    {columns.map((column, i) => (
      <TableColumn key={column} field={column}>
        {column}
      </TableColumn>
    ))}
</Table>

在该组件中，我使用以下函数循环遍历

表

的子项（表列的实例）：

getDefaultSortColumn() {
    let col = this.props.children[0].props.field;
    this.props.children.forEach((column: React.ReactElement<TableColumnProps>) => {
      if (column.props.sortDefault) {
        col = column.props.field;
      }
    });
    return col as string;
  }

---

但我不想这样访问我的孩子，测试该项是我想要的

TableColumnProps

元素类型还是

TableColumnProps

元素数组。问题仍然存在。

您的JSX编译结果如下：

const TableColumn = React.createElement('div', { field: 'code' }, 'Code')
const Table = React.createElement('div', {}, [
  TableColumn,
  columns.map((column, i) =>
    React.createElement('div', { key: column, field: column }, column),
  ),
])

您可以看到

表

的子级包括一个react元素和一个react元素数组。直接在子数组上迭代会得到这样的结果

React为这类事情提供了一个顶级api————它通过

React.Children.map

和

React.Children.forEach

遍历迭代中的子数组

调整后的函数如下所示：

getDefaultSortColumn() {
  let col = this.props.children[0].props.field;
  React.Children.forEach(this.props.children, (column) => {
    if (column.props.sortDefault) {
      col = column.props.field;
    }
  });
  return col;
}

---

这将导致以下错误：“

类型的参数”（列：ReactElement）=>void”不可分配给类型的参数“（子级：ReactChild，索引：number）=>any”。参数“column”和“child”的类型不兼容。类型“ReactChild”不可分配给类型“ReactElement”。类型“string”不可分配给类型“ReactElement”

类型检查，答案仍然有效，是在React中循环子级而不必检查嵌套数组的首选/推荐方法。我将更新答案以排除类型检查位，并让您找出该部分。看这里的例子：你是对的。我能够解决我的类型检查，它似乎现在工作。谢谢你的澄清！

const TableColumn = React.createElement('div', { field: 'code' }, 'Code')
const Table = React.createElement('div', {}, [
  TableColumn,
  columns.map((column, i) =>
    React.createElement('div', { key: column, field: column }, column),
  ),
])

getDefaultSortColumn() {
  let col = this.props.children[0].props.field;
  React.Children.forEach(this.props.children, (column) => {
    if (column.props.sortDefault) {
      col = column.props.field;
    }
  });
  return col;
}