Как передать все остальные реквизиты для реагирования на класс?

Скажем, у меня есть 3 реквизита, которые требуется для моего класса, и реализует i.e.

<Component propOne={this.props.one} propTwo={this.props.two}>
  {this.props.children}
</Component>

как я могу передать любые другие реквизиты, которые я изначально не ожидал, но скажите, что кто-то другой, использующий мой компонент, захочет использовать?

Я думал

<Component propOne={this.props.one} propTwo={this.props.two} {...this.props} >
  {this.props.children}
</Component>

Но я обеспокоен дублированием дубликатов

Ответы

Ответ 1

Используйте оператор распространения

const {propOne, propTwo, ...leftOver} = this.props;
// 'leftOver' contains everything except 'propOne' and 'propTwo'

Таким образом, ваш пример станет:

const {propOne, propTwo, children, ...props} = this.props;
<Component propOne={propOne} propTwo={propTwo} {...props}>
  {children}
</Component>

Ответ 2

Отфильтровать их?

function without(props, keys) {
  return Object.keys(props)
    .filter((key) => keys.indexOf(key) !== -1)
    .reduce((retVal, key) => {
      retVal[key] = props[key];
    }, {});
}

<Component propOne={this.props.one} propTwo={this.props.two} {...without(this.props, ['one', 'two'])} >
  {this.props.children}
</Component>