Destructuring 객체와

Question

내가 가진 결과 중 하나를 무시 : this.props 내부

const section = cloneElement(this.props.children, { 
    className: this.props.styles.section, 
    ...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" ] 

---

업데이트 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, 
}); 

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});