Передача объекта javascript в качестве аргумента функции - эквивалент машинописного текста - PullRequest
Новая
       10

Передача объекта javascript в качестве аргумента функции - эквивалент машинописного текста

1 голос
/ 17 июня 2019

Я пытаюсь лучше понять код в этом примере: https://codesandbox.io/s/r5n96yvwnm

Итак, есть эта функция (строки 9-11): 

function MyCell({ value, columnProps: { rest: { someFunc } } }) {
  return <a href="#" onClick={someFunc}>{value}</a>
}

Что это за конструкция, и можно ли ее легко перевести на Typescript? Я имею в виду, что я могу пойти дальше и создать интерфейс для машинописного текста со всеми необходимыми реквизитами, но мне было интересно, есть ли более короткий способ сделать это. Я никогда не видел такую ​​конструкцию, поэтому любые ссылки с более подробным объяснением приветствуются.

Спасибо

Ответы [ 2 ]

2 голосов
/ 17 июня 2019 
function MyCell({ value, columnProps: { rest: { someFunc } } }) {

Эта часть использует деструктурирование , чтобы выбрать свойства объекта.Это так же, как: 

function MyCell(props) {
  const value = props.value;
  const columnProps = props.columnProps;
  const rest = columnProps.rest;
  const someFunc = rest.someFunc;

Выполнение этого с машинописью выглядело бы примерно так (я предполагаю некоторые типы в интерфейсе): 

interface MyCellProps {
  value: number;
  columnProps: {
    rest: {
      someFunc: () => void;
    }
  }
}

function MyCell: React.FC<MyCellProps>({ value, columnProps: { rest: { someFunc } } }) {
   return <a href="#" onClick={someFunc}>{value}</a>
}
1 голос
/ 17 июня 2019

Звучит так, будто параметры сбивают вас с толку.MyCell - это функция, которая принимает один параметр.Предполагается, что этот параметр будет объектом со свойствами value и columnProps.Также ожидается, что columnProps будет объектом со свойством rest.Также ожидается, что rest будет obj с проп someFunc.

Это называется object destructuring, а в конкретном случае использования его в параметрах оно называется unpacking ( mdn).

...