IT技术 - 在没有 TypeScript 的情况下，这种类型注释如何在 React 代码中工作？ - 吾爱随笔录

在没有 TypeScript 的情况下，这种类型注释如何在 React 代码中工作？

IT技术 javascript reactjs react-router

2021-02-26 15:26:58

我正在ReactRouter 页面上查看此代码示例，这一段很有趣：

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      fakeAuth.isAuthenticated ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{
            pathname: "/login",
            state: { from: props.location }
          }}
        />
      )
    }
  />
);

该component: Component部分看起来像一个类型注释。当我把这个例子放到一个空文件中时，Webstorm 没有抱怨，但我没有看到它们使用 Flow 或 TypeScript 或导入中的任何东西。

JavaScript 已经有类型注解了吗？当我搜索时，我在 MDN 上没有看到任何关于此的内容，而且 React 也不会从我学到的内容中自动提供类型注释......

2个回答

您看到的不是类型注释，而是对象模式中的属性。让我们简化您的示例以帮助了解发生了什么。

这是一个易于理解的函数：

f = (h) => [h.x, h.y]

该函数f接受一个对象h并返回一个带有h.xand的数组h.y。现在，在现代 JavaScript 中，不必传入一个对象并在函数体中将其全部分解。相反，我们让函数的参数部分成为一个模式，这样我们根本不需要理会那个h变量。所以我们可以像这样重写它（以与您的示例相似的方式）：

f = ({x: xValue, y: yValue}) => [xValue, yValue]

因此，就像以前一样，您可以将任何具有 x 和 y 属性的对象传递给 f ，它会返回这些属性的值的数组。

这是在行动：

> f = (h) => [h.x, h.y]
[Function: f]
> f({x:1, y:2, z:3})
[ 1, 2 ]
> f = ({x: xValue, y: yValue}) => [xValue, yValue]
[Function: f]
> f({x:1, y:2, z:3})
[ 1, 2 ]

顺便说一句，通常人们会跳过xValue和yValue部分并具有：

f = ({x: x, y: y}) => [x, y]

由于速记属性符号只是：

f = ({x, y}) => [x, y]

但正如@BhojendraRauniyar 在另一个答案中所写的那样，此代码正在使用的框架中有大写约定。

它不是类型注释。这是一个 ES6 特性，称为解构其余参数：

首先考虑这个例子：（解构赋值）

const test = myObject.prop
// prop can be assigned in a variable
const { prop } = myObject
// but we want prop as a test variable
// and can be written as
const { prop: test } = myObject
// which is similar to first line
console.log(test)

这是我们传递参数的方式：

({ component, ...rest })

// We're giving component name as Component

({ component: Component, ...rest })

因此，您可以使用<Component />小写组件<component />在react中无效。

此外，我建议您深入研究以下博客：

其它你可能感兴趣的问题

上一篇如何在 React 上正确地将 onclick 处理程序绑定到 `this` 下一篇使用变量访问对象的属性