Confondu avec affectation de déstructuration dans la syntaxe JSX

Question

Je suis super confondu avec la syntaxe d'affectation destructuring utilisée dans JSX. Dans la version 1 ci-dessous, je reçois l'application imprimée sur la console et dans la version 2, je reçois un Type Error - Cannot convert undefined or null to object.

J'ai lu que pour exécuter Javascript dans JSX { } sont utilisés mais je ne suis toujours pas clair quand utiliser quoi. Je voudrais imaginer que puisque render() est déjà dans { } javascript peut être mis directement sans besoin d'un autre ensemble d'accolades.

Quelle syntaxe est correcte ci-dessous? Version 1 ou Version 2? Je ne sais pas d'où vient l'application, donc je ne peux pas le vérifier de cette façon.

class FormApplication extends React.Component { 

render() { 
const { app, locale } = this.props; 

    // Version 1 
    let ownPropNames = Object.getOwnPropertyNames({app}); 

    // Version 2 
    let ownPropNames = Object.getOwnPropertyNames(app); 

    console.log('app own prop names are:' + ownPropNames); 
return (
    <Provider store={store}> 
    <Summary locale={locale} app={app}> 
     <FormContainer/> 
    </Summary> 
    </Provider> 
); 
} 
} 

Answer 1

La version 2 est correcte.

déstructurante l'objet de this.props deux nouvelles variables déclare const, ce qui équivaut à this-

const app = this.props.app 
const locale = this.props.locale 

Dans votre version 1 - La syntaxe

{app} 

est équivalent à

{app:app} 

Dans votre version 2 - L'application const est accessible correctement et directement.

Answer 2

Il semble que la version 1 imprime l'objet tel quel et la version 2 affiche la valeur de la propriété nommée app de l'objet.

Answer 3

La version 2 est correcte si vous essayez d'obtenir les propriétés de app. Cela n'est pas lié à vos accolades render(), mais vous transmettez un paramètre à une fonction.