ES6-Objekt Destrukturierung Klärung mit React-Komponente

Question

Ich habe eine Frage in Bezug auf Objekt Destrukturierung in JS. Im folgenden Code würde ich davon ausgehen, dass der Komponente Layout das Wertlayout (mit Kleinbuchstaben) zugewiesen worden wäre. Der Wert des Layouts ist jedoch nicht definiert und Layout wird verwendet.

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

Ich habe dann versucht, die Komponente mit ({ Layout, ...rest }) zu extrahieren, aber ich bekomme wieder einen undefinierten Fehler ausgelöst. Ich wollte nur etwas klären, wenn ich etwas falsch verstehe.

Answer 1

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

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

Dies korrekt funktioniert.

Answer 2

Ich denke, dass Sie cloneElement von der React API verwenden möchten. Sie haben Layout in einer Variablen gespeichert, wenn Sie es zurückgeben möchten, müssen Sie es verwenden, nicht die Layout-Komponente.

Etwas wie folgt aus:

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

Das gibt Ihnen so etwas wie dieses

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

Answer 3

Die : Insider-Objektdestrukturierung weist den Wert einem neuen Variablennamen zu.

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

 
console.log(aa);

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