如何在类型脚本中使用具有 React 无状态函数组件的子项

Question

使用类型脚本和 React，我们不再需要扩展 React.Props，以便编译器知道所有反应组件 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”类型上不存在。

我想这是因为编译器确实无法知道一个普通函数将在props参数中被赋予children。

所以问题是我们应该如何在TypeScript的无状态函数组件中使用子元素？

我可以回到MyProps extends React的老方法。Props，但Props接口被标记为不推荐使用，并且无状态组件没有或不支持Props。根据我的理解，请参阅。

所以我可以手动定义儿童prop：

interface MyProps {
  children?: React.ReactNode;
}

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

第二：我必须把孩子写成可选的（？），否则消费者会认为孩子应该是组件的一个属性（

我好像错过了什么。谁能澄清一下我的上一个例子是否是在React中使用无状态功能组件的方法？




Answer 1

更简单的答案：使用ReactNode：

js prettyprint-override">interface MyProps {
  children?: React.ReactNode
}

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

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

最后，关于将孩子作为“属性”传递（在 React 术语中，它将作为“道具”传递，而不是属性）：这是可能的，但在大多数情况下，当传递 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.FunctionComponent类型或React.FC的别名。

不过，你可以用同样的方式使用它们:

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

React 16.8(旧版本)之前:

现在，您可以使用 React.无状态组件

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

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

对于具有自定义属性的组件(如< code>MyProps接口):

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

现在，props已经获得了childrenprops属性，以及来自

我在2.0.7版打字稿中检查过这个

此外，您可以使用< code>React。SFC而不是< code>React。StatelessComponent。

Answer 3

您可以使用< code>React。有孩子的建议

interface MyProps { }

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