javascript - React Native Arrow语法说明(React Native Arrow Syntax Explanation)

Question

I am reviewing some code and was unable to find a breakdown of this arrow function syntax.

(我正在查看一些代码，无法找到此箭头函数语法的详细信息。)

Could someone help explain what the parameters ({ match, onOpen }: MatchListItemProps) mean?

(有人可以帮忙解释一下参数({ 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 (....

  ask by Olivia translate from so

Answer 1

Could someone help explain what the parameters ({ match, onOpen }: MatchListItemProps) mean?

(有人可以帮忙解释一下参数({ match, onOpen }: MatchListItemProps)是什么意思吗？)

This code is using typescript and destructuring.

(该代码使用打字稿和解构。)

Let me get rid of both for a second, then add them back in. Here it is in pure javascript without destructuring:

(让我暂时摆脱这两种情况，然后再将它们添加回去。这是使用纯JavaScript而不破坏结构的：)

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

Now i'll add back in the typescript.

(现在，我将重新添加打字稿。)

A variable can be followed by a colon and then a type.

(变量后可以跟一个冒号，然后是一个类型。)

This information is used to catch type errors at compile time.

(此信息用于在编译时捕获类型错误。)

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

And then adding in the destructuring.

(然后加入解构。)

This is a shorthand to pluck values off an object and assign them to local variables:

(这是从对象中提取值并将其分配给局部变量的一种简写形式：)

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