我有：
const section = cloneElement(this.props.children, {
className: this.props.styles.section,
...this.props,
});
在里面this.props，我有一个styles不想传递给克隆元素的属性。
我能怎么做？
解构对象并忽略结果之一
IT技术
javascript
reactjs
destructuring
ecmascript-next
2021-04-13 04:31:36
4个回答
您可以使用对象休息/传播语法：
// 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
然后将其添加到 babel 配置的预设部分。例如在您的 .babelrc 文件中：
"presets": [ "es2015", "react", "stage-1" ]
根据 OP 对问题的评论进行更新。
好的，所以你说你已经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,
});
您可以使用Object Rest Spread 运算符魔术。
const props = { a: 1, b: 2, c: 3 };
const { a, ...propsNoA } = props;
console.log(propsNoA); // => { b: 2, c: 3 }
所以在你的情况下，它将是：
const { styles, ...propsNoStyles } = this.props;
const section = cloneElement(this.props.children, {
className: this.props.styles.section
...this.propsNoStyles,
});
或者你可以做这样的事情......
var newProp = (this.props = {p1, p2,...list out all props except styles});
我喜欢 ctrlplusb 的回答，但如果您不想添加新的 babel 预设，这里有一个使用Object.assign的替代方法：
const section = cloneElement(this.props.children, {
className: this.props.styles.section,
...Object.assign({}, this.props, {
styles: undefined
})
});