Разрушить аргумент объекта, но оставить его доступным в теле функции?

Question

У меня есть эта функция, например:

const FieldRange = props => (
  <div className={b('field-range', props)}>
    {props.children}
    {!!props.errorFieldName && <Field name={props.errorFieldName}/>}
  </div>
);

В конце концов я решаю, что хочу, чтобы она была больше dry, и переписываю ее таким образом, реструктурируя объект аргумента в свойства:

const FieldRange = ({ children, errorFieldName }) => (
  <div className={b('field-range', props)}>
    {children}
    {!!errorFieldName && <Field name={errorFieldName}/>}
  </div>
);

Но, о нет, мне все еще нужен оригинальный объект во второй строке! Есть ли способ деструктурировать объект, но все же оставить его доступным в теле функции?

Answer 1

Вы можете использовать второй параметр для деструктуризации по умолчанию props.

const FieldRange = (props, { children, errorFieldName } = props) => (
    <div className={b('field-range', props)}>
        {children}
        {!!errorFieldName && <Field name={errorFieldName}/>}
    </div>
);

Answer 2

IMO, лучшим способом было бы либо оставить исходный код как есть, либо объявить переменные в первой строке функции:

const FieldRange = props => {
  const { children, errorFieldName } = props;
  return (
    <div className={b('field-range', props)}>
      {props.children}
      {!!errorFieldName && <Field name={errorFieldName}/>}
    </div>
  );
);

Есть действительно хакерское решение, которое позволяет вам сохранить краткое тело, которое должно использовать второй параметр, который не передается в функцию, которая по умолчанию имеет деструктурированный props:

const FieldRange = (props, { children, errorFieldName } = props) => {

Но это довольно запутанно, я бы не стал не рекомендую.