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

最后，如果参数中包含变量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) { ...。

React Native Arrow语法说明

3 个答案: