RE6 컴포넌트를 사용한 ES6 오브젝트 파괴 설명

Question

JS의 오브젝트 파괴와 관련하여 질문이 있습니다. 아래의 코드에서 컴포넌트 레이아웃에는 값 레이아웃 (소문자 포함)이 할당되었다고 가정합니다. 그러나 레이아웃의 가치는 정의되지 않고 레이아웃이 사용됩니다.

const MustBeAuthenticated = ({ layout: Layout, ...rest }) => { 
    if (!isAuthenticated()) { 
    return redirectToLogin({...rest}) 
    } 
    return (
    <Layout {...rest} /> 
) 
} 

({ Layout, ...rest })을 사용하여 구성 요소를 추출하려고했지만 다시 정의되지 않은 오류가 발생합니다. 내가 뭔가를 오해하고있다면 나는 약간의 설명을 원했다.

Answer 1

function logmsg({logMessage: LogMessage, ...rest}) { 
    console.log(LogMessage); // prints 'hi' 
    console.log(rest); // prints {bye: 'bye'} 
} 

logmsg({logMessage: 'hi', bye: 'bye'}); 

처럼 당신에게 무언가를 줄 것이다.

Answer 2

React API에서 cloneElement을 사용하려고한다고 생각합니다. 레이아웃에 변수가 저장되어 있습니다. 반환하려는 경우 레이아웃 구성 요소가 아닌 레이아웃 요소를 사용해야합니다. 이 같은

뭔가 :

const MustBeAuthenticated = ({layout, ...rest}) => { 
    if (!isAuthenticated()) { 
    return redirectToLogin({...rest}) 
    } 
    return (
    React.cloneElement(
     layout, 
     rest, 
    ) 
) 
} 

이 제대로 작동이

<element.type {...element.props} {...props}>{children}</element.type> 

Answer 3

: 내부 객체 파괴가 새로운 변수 이름에 값을 할당하고 있습니다.

var {a:aa} = {a: 3}; 
 

 
console.log(aa);

소스 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Assigning_to_new_variables_names_and_providing_default_values