使用 Typescript 在 React 中传递 props

直接从道具中抓取

处理对象

将相同的 prop 传递给多个组件

我最近在做一个项目，一边尝试自学一点 TypeScript。至少可以说，这……挺有意思的。作为一个只懂 JavaScript 的人，严格编码类型的概念对我来说显得异常笨重和陌生。我原本以为自己掌握得很好的东西，比如在 React 中向下传递 props，突然变得异常困难！所以在这篇文章里，我只想聊聊我是如何完成这个过程的。

直接从道具中抓取

假设你尝试将一系列 props 传递给 React 中的底层组件，并且不进行任何解构操作，也不传递任何对象。那么调用底层组件的方式可能如下所示：

<EditBio
  bio={bio}
  open={open}
/>

创建它可能看起来像这样：

const EditBio: FC = (props): JSX.Element => {
  <>
    {props.bio}
    <br />
    {props.open}
  </>
};

为了让 TypeScript 正常工作，我们需要告诉它 props 对象应该包含什么内容。为此，我们需要创建一个接口。该接口将包含我们将要引用的 props 及其类型。例如，我们可以创建如下接口：

interface BioProps {
  bio: string,
  open: boolean,
}

之后，我们需要编辑组件创建以包含如下界面：

const EditBio: FC<BioProps> = (props): JSX.Element => {
  <>
    {props.bio}
    <br />
    {props.open}
  </>
};

但是如果我们的 prop 本身就是一个物体呢？让我们来看看！

处理对象

所以在这个例子中，我们将从 props 中解构出一些东西，解构后的 item 也将是一个对象。因此，我们初始的组件创建可能看起来像这样：

const UserProfile: FC = ({ user }): JSX.Element => {
  <>
    {user.firstName}
    <br />
    {user.dob}
    <br />
    {user.bio}
  </>
};

所以我们需要在这里做两件事。首先，我们需要创建一个新类型，定义用户对象每个属性的类型。它可能看起来像这样：

 type UserType = {
    dob: string,
    firstName: string,
    userBio: string,
  };

之后，我们需要像之前一样定义一个接口，但我们将使用刚刚创建的这个类型来表示我们期望一个与该类型匹配的对象。这相对简单：

interface UserProps {
  user: UserType,
}

最后，我们只需在组件创建函数中弹出那个闪亮的新界面，TypeScript 就很开心了！

const UserProfile: FC<UserProps > = ({ user }): JSX.Element => {
  <>
    {user.firstName}
    <br />
    {user.dob}
    <br />
    {user.bio}
  </>
};

将相同的 prop 传递给多个组件

我还想讨论一种场景，那就是当需要将同一个用户对象传递给多个组件时该怎么做。您可以只在每个组件中声明类型和接口。或者，您可以声明一次，然后在任何需要的地方导出该声明。让我们来看看！首先，您需要在 src 文件夹中创建一个名为“customTypings”的文件夹。如果这是一个大型项目，并且需要声明许多不同的类型/接口，您可能需要在此文件夹中为每个要导出的模块创建子文件夹，因此我们将创建一个子文件夹作为示例，并以您要导出的模块命名（本例中为 myTypes）。最后，我们将创建一个名为 index.d.ts 的文件，所有自定义类型都将存放在这里。在该文件中，我们声明上一个示例中使用的 UserType 类型和 UserProps 接口，并导出它们：

declare module 'myTypes' {
  type UserType = {
    dob: string,
    firstName: string,
    userBio: string,
  };

  interface UserProps {
    user: UserType,
  }
}

module.exports = {
  UserType,
  UserProps,
};

之后，我们需要进入 tsconfig.json 文件，在编译器选项中新建一个名为 typeRoots 的选项（或者编辑现有的选项）。它看起来应该像这样：

 "compilerOptions": {
    "typeRoots": [
      "src/customTypings",
      "node_modules/@types"
    ]
  },

现在，无论您想在何处使用我们的类型或接口，您只需要在组件的开头将其导出，就像导出其他任何东西一样：

import { UserProps } from 'myTypes';

const UserProfile: FC<UserProps > = ({ user }): JSX.Element => {
  <>
    {user.firstName}
    <br />
    {user.dob}
    <br />
    {user.bio}
  </>
};

我希望这有助于解决使用 TypeScript 在 React 中传递 props 的一些困难！

文章来源：https://dev.to/mconner89/passing-props-in-react-using-typescript-20lm

使用 Typescript 在 React 中传递 props 直接从 props 中获取 处理对象 将相同的 prop 传递给多个组件

使用 Typescript 在 React 中传递 props

直接从道具中抓取

处理对象

将相同的 prop 传递给多个组件

直接从道具中抓取

处理对象

将相同的 prop 传递给多个组件

使用 Typescript 在 React 中传递 props 直接从 props 中获取处理对象将相同的 prop 传递给多个组件