如何在TypeScript中使用带有React无状态功能组件的子级？

Question

结合使用TypeScript和React，我们不再需要扩展React.Props，以使编译器知道所有react组件prop都可以有子代：

interface MyProps { }

class MyComponent extends React.Component<MyProps, {}> {
  public render(): JSX.Element {
    return <div>{this.props.children}</div>;
  }
}

但是，无状态功能组件似乎并非如此：

const MyStatelessComponent = (props: MyProps) => {
  return (
    <div>{props.children}</div>
  );
};

发出编译错误：

错误：（102、17）TS2339：类型“ MyProps”上不存在属性“子级”。

我猜这是因为编译器实际上没有办法知道children在props参数中将提供香草函数。

所以问题是我们应该如何在TypeScript的无状态功能组件中使用子代？

我可以回到的旧方法MyProps extends React.Props，但是将Props接口标记为已弃用，并且Props.ref据我所知，无状态组件不具有或不支持。

所以我可以children手动定义道具：

interface MyProps {
  children?: React.ReactNode;
}

第一：是ReactNode正确的类型吗？

第二：我必须将子级写为可选（?），否则消费者会认为这children应该是组件（）的 属性 ，<MyStatelessComponent children={} />如果未提供值，则会引发错误。

好像我缺少什么。谁能说清楚我的最后一个示例是否是在React中使用带有子元素的无状态功能组件的方法？

Answer 1

React 16.8更新： 从React
16.8开始，名称React.SFC和React.StatelessComponent被弃用。实际上，它们已成为React.FunctionComponent类型或React.FC简称的别名。

但是，您将以相同的方式使用它们：

const MyStatelessComponent : React.FunctionComponent<MyProps> = props =>
    <div>
        <p>{props.propInMyProps}</p>
        <p>{props.children}</p>
    </div>

在React 16.8（较旧）之前：

现在，您可以使用以下React.StatelessComponent<>类型：

const MyStatelessComponent : React.StatelessComponent<{}> = props =>
    <div>{props.children}</div>

我在此处添加的内容是将组件的返回类型设置为React.StatelessComponenttype。

对于具有自己的自定义道具（例如MyProps界面）的组件：

const MyStatelessComponent : React.StatelessComponent<MyProps> = props =>
    <div>
        <p>{props.propInMyProps}</p>
        <p>{props.children}</p>
    </div>

现在，props已经有了children属性以及来自MyProps接口的属性。

我在打字稿版本2.0.7中检查了这一点

此外，为了简洁起见，您可以使用React.SFC代替React.StatelessComponent。