Пожалуйста, объясните, что это за синтаксис Javascript, где объект помещается в качестве параметра в объявлении функции

Question

Я понимаю, что функциям могут быть назначены параметры по умолчанию со следующим синтаксисом:

const Foo = (first = 1) => first + first;

Но в этой функции взято из https://reactcommunity.org/react-transition-group/transition:

const Fade = ({ in: inProp }) => (
  <Transition in={inProp} timeout={duration}>
    {(state) => (
      <div style={{
        ...defaultStyle,
        ...transitionStyles[state]
      }}>
        I'm a fade Transition!
      </div>
    )}
  </Transition>
);

...Я не могу понять, какой { in: inProp } должен быть в объявлении функции.

Я знаю, inProp используется реквизитом in внутри Transition, но почему нетвместо этого мы используем: const Fade = (inProp) => <Transition in={inProp} timeout={duration}>?

Нигде я не вижу ссылки на in кроме раздела prop в Transition, но я почти уверен, что это не одна и та же буквальная переменная.

Я искал всевозможные термины, включая поиск по Symbol Hound, и не могу найти, как это называется или что он делает.

Answer 1

Параметр в функции Fade не является параметром по умолчанию.На самом деле это деструктуризация объекта.

Синтаксис назначения деструктурирования - это выражение JavaScript, позволяющее распаковывать значения из массивов или свойства объектов в отдельные переменные.

Ссылка на MDN

Простой способ думать о деструктуризации объекта состоит в том, что это похоже на помещение литерала объекта ({ key: value }), где вы обычно помещаете имя переменной.

Это означает, что

const { propA, propB } = obj

эквивалентно

const propA = obj.propA;
const propB = obj.propB;

и в вашем примере

({ in: inProp }) => { ... }

совпадает с

(arg) => {
  const inProp = arg.in;
  ...
}

Answer 2

in - это имя поля / ключа в объекте, передаваемом компонентной функции Transition (это, вероятно, обрабатывается используемой библиотекой).inProp указывает имя новой переменной для in, которое будет использоваться в функции.

Таким образом, входящий аргумент функции - это объект, который имеет эту форму как минимум:

{
  in: "A value"
}

Вы можете переименовать этот ключ in в newName и использовать его следующим образом:

const Fade = ({ in: newName }) => (
  <Transition in={newName} timeout={duration}>
    {(state) => (
      <div style={{
        ...defaultStyle,
        ...transitionStyles[state]
      }}>
        I'm a fade Transition!
      </div>
    )}
  </Transition>
);

Или вы можете избежать переименования имени ключа объекта и использовать его следующим образом:

const Fade = ({ in }) => (
  <Transition in={in} timeout={duration}>
    {(state) => (
      <div style={{
        ...defaultStyle,
        ...transitionStyles[state]
      }}>
        I'm a fade Transition!
      </div>
    )}
  </Transition>
);

Answer 3

Это параметр распаковки .

Два примера:

function getSecond({two}) {
  document.write(two);
}

function getFirst({one: first}) { // this notation "renames" the property
  document.write(first);
}

obj = {
  one: 'First',
  two: 'Second',
  three: 'Third'
};

getSecond(obj);
document.write(', ');
getFirst(obj);

---

Итак, в вашем случае где-то код вызывает функцию Fade, например:

Fade({
  property: value,
  // ...
  in: ... ,
  // ...
});

И ваша функция принимает объекткак этот аргумент и извлекает его свойство in, но переименовывает его (локально) в inProp.