Children.toArray() - TS2339：类型“ReactChild | ”上不存在属性“key” 反应片段 | ReactPortal'... - React Typescript

Question

我正在创建一个 TypeScript 组件/包装器，在每个子组件之间添加一个分隔线：

\n

import React, { FC, Children } from \'react\'\n\nconst DividedChildren: FC = ({ children }) => {\n  return (\n    <div>\n      {Children.toArray(children).map((node, index) => {\n        if (index === 0) return node\n        return (\n          <Fragment key={node.key}> // TS Error, but code works fine\n            <div className="divider" />\n            {node}\n          </Fragment>\n        )\n      })}\n    </div>\n  )\n

\n

key但是，当我尝试将孩子移动到他的新容器中时，出现 TypeScript 错误：
\nTS2339: Property \'key\' does not exist on type \'ReactChild | ReactFragment | ReactPortal\'. \xc2\xa0\xc2\xa0Property \'key\' does not exist on type \'string\'.

\n

如何安全地将每个项目的密钥移动到其新容器中？

\n

Answer 1

node我已经设法通过强制转换为类型来解决这个特定错误ReactElement。

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