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

Question

使用带有React的TypeScript，我们不再需要扩展React.Props，以便编译器知道所有React组件Props都可以有子级：

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。

因此，我可以手动定义子类道具：

interface MyProps {
  children?: React.ReactNode;
}

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

第二：我必须将children写为可选（？），否则消费者会认为children应该是组件的属性（

我好像错过了什么。有人能澄清一下我的最后一个示例是否是在React中使用带有子级的无状态功能组件的方法吗？




Answer 1

更简单的答案：使用ReactNode：

interface MyProps {
  children?: React.ReactNode
}

是否子项是可选的（即是否具有？）取决于您的组件。？是表达这一点的最简洁的方式，因此没有什么错。

关于历史：当最初被问到时，这不一定是正确的答案：类型ReactNode仅在2017年3月通过这个拉式请求添加到（几乎）其当前形式中，但今天几乎所有阅读本文的人都应该使用足够现代的React版本。

最后，关于将子项作为“属性”传递（在React行话中，将其作为“prop”而不是属性传递）：这是可能的，但在大多数情况下，当传递JSX子项时读起来更好：

<MyComponent>
  <p>This is part of the children.</p>
</MyComponent>

阅读比阅读容易

<MyComponent children={<p>This is part of the children.</p>} />

Answer 2

React 16.8更新：自React 16.8以来，名称React.SFC和React.StatelessComponent已弃用。实际上，它们已成为React.FunctionComponenttype或简称React.FC的别名。

不过，你会以同样的方式使用它们：

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

在React 16.8（旧）之前：

现在，您可以使用React.stateless组件

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

我在这里添加的是将组件的返回类型设置为React.StatelessComponenttype。

对于具有自定义道具（如MyPropsinterface）的组件：

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

现在，props已经获得了子属性以及来自MyProps接口的属性。

我在打印版本2.0.7中检查了这个

此外，为了简洁起见，您可以使用React.SFC而不是React.StatelessComponent。

Answer 3

您可以使用React.PropsWithChildren

interface MyProps { }

function MyComponent(props: React.PropsWithChildren<MyProps>) {
  return <div>{props.children}</div>;
}