React Native Arrow语法说明

Question

我正在查看一些代码，无法找到此箭头函数语法的详细信息。有人可以帮忙解释一下({ match, onOpen }: MatchListItemProps)是什么意思吗？

import React from 'react';
import { ListItem } from 'react-native-elements';
import { StyleSheet } from 'react-native';

type MatchListItemProps = {
  match: User,
  onOpen: Function
};

const styles = StyleSheet.create({});

const TestScreen = ({ match, onOpen }: MatchListItemProps) => {
  const { name, image, message } = match;
  return (....

Answer 1

有人可以帮忙解释一下({ match, onOpen }: MatchListItemProps)的含义是什么？

此代码正在使用打字稿和解构。让我暂时摆脱这两种情况，然后再将它们添加回去。这是使用纯JavaScript而不破坏的结构：

const TestScreen = (props) => {
  let match = props.match;
  let onOpen = props.onOpen;

现在我将在打字稿中重新添加。变量后可以跟一个冒号，然后是一个类型。此信息用于在编译时捕获类型错误。

const TestScreen = (props: MatchListItemProps) => {
  let match = props.match;
  let onOpen = props.onOpen;

然后添加解构。这是从对象中提取值并将其分配给局部变量的一种简写方式：

const TestScreen = ({ match, onOpen }: MatchListItemProps) => {

Answer 2

由于参数是对象，因此可以在参数内部对其进行解构。

例如，看一下这段代码

let person = {
   name: 'Felipe',
   age: '23'
}

您可以采用这种形式的值

let name = person.name
let age = person.age

或者您也可以使用快捷方式进行销毁分配

let { name, age } = person

最后，如果变量在参数内，则可以在参数内对其进行解构

logPersonNameAndAge = ({ name, age }) => {
   console.log(name)
   console.log(age) 
}

以便您可以调用它传递整个对象

logPersonNameAndAge(person)

Answer 3

您的代码是TypeScript，而不仅仅是JavaScript。 : MatchListItemProps是TypeScript使用的类型注释，该注释用于在编译时而不是在运行时捕获许多常见错误。 ({ match, onOpen }) => { ...是一种解构，这意味着该函数接受一个对象，并将包含这些对象名称的范围变量match和onOpen纳入范围变量。大致相当于obj => { let match = obj.match, onOpen = obj.onOpen; ...。反过来，const TestScreen = obj => { ...是lambda，大致等于function TestScreen(obj) { ...。