Skip to content

Instantly share code, notes, and snippets.

@a-x-
Created September 28, 2017 11:22
Show Gist options
  • Save a-x-/6bb5cbbc7312a120a8363dbb66639397 to your computer and use it in GitHub Desktop.
Save a-x-/6bb5cbbc7312a120a8363dbb66639397 to your computer and use it in GitHub Desktop.
class Link extends PureComponent {
render () {
// Unusual useful omit application
const rest = omit(this.props, [
'url', 'basePath', 'RouterLink', 'method', 'currentTab', 'disabled', 'children', 'className',
'title', 'confirm', 'onClick', 'onSuccess', 'onFailure', 'axiosProps', 'noExternalIcon',
]);
return isExternalUrl(this.props.url)
? this.renderExternalLink({ rest })
: this.renderInternalLink({ rest });
}
}
@a-x-
Copy link
Author

a-x- commented Sep 28, 2017

По умолчанию пропсы разделяются так:
const { foo, bar, ...rest } = this.props;
даже если небольшая часть пропсов останется неиспользованной

но в крайних случаях lodash.omit подходит лучше

@a-x-
Copy link
Author

a-x- commented Sep 28, 2017

Вообще конечно такие случаи заставляют усомнится в правильности ...rest и ещё раз посмотреть на domProps

Но тут есть два НО:

  1. ...rest позволяет избежать неожиданностей при произовольном комбинировании компонентов пользователем. Если компоненты не ведут себе как обычные DOM-элементы, могут появляться баги, когда style например не пробрасывается или ещё какая фигня; Такое может случится например при замене <a на <Link пользователем или в условном подключении компонента или DOM-элемента
    isCrazy ? <label { ...labelProps }/> : <Label { ...labelProps }/>

  2. domProps чисто из-за нейминга не всегда подходят, иногда root — это другой компонент. Тут в идеале всё равно ...rest нужно кинуть так, чтобы они легли на ближайший DOM-элемент, например
    <Autosuggest inputProps={ ...rest } { ...autosuggestProps } /> опять же из-за соблюдения общего с DOM-элементами контракта и консистентности

tl;dr: Итого, юзаем ...rest и кидаем на DOM
Юзаем спред-дестракчеринг, но когда неиспользуемых пропсов много, то omit

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment