反应儿童的正确打字稿类型是什么？答案

【问题标题】：What is the correct typescript type for react children?反应儿童的正确打字稿类型是什么？
【发布时间】：2020-04-15 18:58:46
【问题描述】：

我正在尝试正确键入映射子组件的道具：

type Props = {
    children: any
}

const MyComponent: FunctionComponent<Props> = () => (React.Children.map(children, someMapingFunction);

我一直在使用JSX.Element，但感觉不太对劲。

【问题讨论】：

我用React.ReactNode
您是否正在尝试将您的孩子键入特定的受控类型？如果没有，您可能应该使用React.PropsWithChildren<MyProps>。这会将默认子项添加到任何道具。

【解决方案1】：

查看DefinitelyTyped 下的代码，children 似乎被键入为ReactNode。

例子：

type Props = {
    children: ReactNode
}

const MyComponent: FunctionComponent<Props> = () => (React.Children.map(children, someMapingFunction);

注意：ReactNode 类型可以在 React 命名空间中找到：

import React from 'react';

let someNode: React.ReactNode;

【讨论】：

【解决方案2】：

实际上，如果您使用React.FunctionComponent，则不必指定children。

例如下面的代码编译没有错误：

const MyComponent: React.FC<{}> = props => {
  return props.children
}

【讨论】：