children.toArray() - TS2339：“ReactChild | 類型”上不存在屬性“鍵” 反應片段 | ReactPortal'... - 反應 Typescript

Question

我正在創建一個 TypeScript 組件/包裝器，在每個孩子之間添加一個分隔符：

import React, { FC, Children } from 'react'

const DividedChildren: FC = ({ children }) => {
  return (
    <div>
      {Children.toArray(children).map((node, index) => {
        if (index === 0) return node
        return (
          <Fragment key={node.key}> // TS Error, but code works fine
            <div className="divider" />
            {node}
          </Fragment>
        )
      })}
    </div>
  )

但是，當我嘗試將孩子的key移動到他的新容器中時，我收到了 TypeScript 錯誤：
TS2339: Property 'key' does not exist on type 'ReactChild | ReactFragment | ReactPortal'. Property 'key' does not exist on type 'string'.

如何安全地將每個項目的鍵移動到其新容器中？

Answer 1

我設法通過將node轉換為ReactElement類型來解決這個特定錯誤。

Children.toArray(children).map((node: React.ReactElement, index) => { //...