如何在 TypeScript 中使用 React 无状态函数组件

小能豆

如何在 TypeScript 中使用 React 无状态函数组件

javascript

将 TypeScript 与 React 结合使用时，我们不再需要进行扩展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”。

我猜这是因为编译器实际上没有办法知道children在 props 参数中会给出一个原始函数。

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

我可以回到以前的方式MyProps extends React.Props，但是Props界面被标记为已弃用Props.ref，并且据我所知，无状态组件没有或不支持。

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

interface MyProps {
  children?: React.ReactNode;
}

第一：ReactNode类型是否正确？

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

好像我漏掉了一些东西。有人能解释一下我的最后一个例子是否是在 React 中使用带有子元素的无状态函数组件的方法吗？

阅读 39

2024-06-11

共1个答案

小能豆

是的，你的方法是正确的。在 TypeScript 和 React 中，当使用无状态函数组件时，你需要children在 props 接口中手动定义 prop。你最后一个例子中你将其定义children为类型的可选属性，React.ReactNode这是处理无状态函数组件中子元素的推荐方法。

以下是您的方法的细分：

定义 Props 接口：您定义一个接口MyProps来表示组件的 props。

interface MyProps {
  children?: React.ReactNode;
}

定义 Children Prop：您将其定义children为类型的可选属性React.ReactNode。React.ReactNode是 React 组件中子项使用的正确类型，因为它允许将任何有效的 React 节点作为子项传递。
可选 Prop：children将( )设为可选children?: React.ReactNode是正确的方法。这样，组件的使用者可以根据需要提供子项，但这不是必需的。

通过以这种方式定义childrenprop，您可以确保 TypeScript 理解您的无状态功能组件可以接收子项作为 props，而不会引发编译错误。

这是使用定义的 props 接口的无状态功能组件：

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

这种方法在 React 的 TypeScript 中被广泛接受和使用，在处理无状态功能组件中的子组件时提供了清晰度和类型安全性。

2024-06-11