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

您可以为道具使用 React.PropsWithChildren<P> 类型：

interface MyProps { }

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

---

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.StatelessComponent 类型。

对于具有您自己的自定义道具（如 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。

---

更简单的答案：使用 ReactNode：

interface MyProps {
  children?: React.ReactNode
}

children 是否可选（即是否有 ?）取决于您的组件。 ? 是表达这一点的最简洁的方式，所以没有错。

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

最后，关于将 children 作为“属性”传递（在 React 术语中，将其作为“属性”而不是属性传递）：这是可能的，但在大多数情况下，在传递 JSX 子节点时会更好读：

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

比阅读更容易

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

---

您可以将子组件添加到组件中，如果它连接到您所需要的容器。

const MyComponent = ({ 
   children  
}) => {
  return <div>{children}</div>

}

---

您可以使用

interface YourProps { }
const yourComponent: React.SFC<YourProps> = props => {}

---