деструктурирующего объект и игнорировать один из результатов

Question

у меня есть:

const section = cloneElement(this.props.children, { 
    className: this.props.styles.section, 
    ...this.props, 
}); 

Внутри this.props, у меня есть styles свойства, что я не хочу, чтобы перейти к клонированному элементу.

Как я могу это сделать?

Answer 1

Вы можете использовать object rest/spread syntax:

// We destructure our "this.props" creating a 'styles' variable and 
// using the object rest syntax we put the rest of the properties available 
// from "this.props" into a variable called 'otherProps' 
const { styles, ...otherProps } = this.props; 
const section = cloneElement(this.props.children, { 
    className: styles.section, 
    // We spread our props, which excludes the 'styles' 
    ...otherProps, 
}); 

Я предполагаю, что у вас уже есть поддержка от этого синтаксиса на основе кода выше, но следует помнить, что это планируемая синтаксис, который доступен для вас через babel stage 1 preset. Если вы получаете ошибки синтаксиса на исполнение можно установить пресет следующим образом:

npm install babel-preset-stage-1 --save-dev 

А затем добавить его в разделе предустановок вашей конфигурации Бабель. Например, в вашем файле .babelrc:

"presets": [ "es2015", "react", "stage-1" ] 

---

Обновление на основе комментариев по вопросу по ОП.

Хорошо, вы говорите, что у вас уже есть переменная styles, объявленная перед этим блоком? Мы можем справиться и с этим делом. Чтобы избежать этого, вы можете переименовать свои деструктивные аргументы.

Например:

const styles = { foo: 'bar' }; 

const { styles: otherStyles, ...otherProps } = this.props; 
const section = cloneElement(this.props.children, { 
    className: otherStyles.section, 
    // We spread our props, which excludes the 'styles' 
    ...otherProps, 
}); 

Answer 2

Мне нравится ответ ctrlplusb, но здесь является альтернативой использования Object.assign, если вы не хотите, чтобы добавить новое столпотворение предустановленное:

const section = cloneElement(this.props.children, { 
    className: this.props.styles.section, 
    ...Object.assign({}, this.props, { 
     styles: undefined 
    }) 
}); 

Answer 3

или вы можете сделать что-то вроде этого ...

var newProp = (this.props = {p1, p2,...list out all props except styles});