Javascript 与JSX语法中的解构赋值混淆

我对JSX中使用的解构赋值语法感到非常困惑。在下面的第1版中，我将应用程序打印到控制台，在第2版中，我得到一个

类型错误-无法将未定义或null转换为object

我确实读过，在JSX中执行Javascript时使用了

{}

，但我仍然不清楚什么时候使用什么。我想想象一下，既然

render（）

已经在

{}

中，javascript就可以直接放入，而不需要另一组大括号

下面哪种语法正确？版本1还是版本2？我不知道应用程序是从哪里来的，所以我无法通过这种方式进行验证

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

应用程序类扩展了React.Component{
render（）{
const{app，locale}=this.props；
//版本1
让ownPropNames=Object.getOwnPropertyNames（{app}）；
//版本2
让ownPropNames=Object.getOwnPropertyNames（应用程序）；
log（'应用程序自己的道具名称为：'+ownPropNames）；
返回(
);
}
}

版本1似乎在按原样打印对象，版本2则打印对象名为app的属性值。

版本1似乎在按原样打印对象，版本2则打印对象名为app的属性值。

版本2是正确的

从this.props中解构对象将声明两个新的常量变量，相当于-

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

在您的版本1中-语法

{app}

相当于

{app:app}

在您的版本2中，可以正确直接地访问const应用程序

版本2是正确的

从this.props中解构对象将声明两个新的常量变量，相当于-

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

在您的版本1中-语法

{app}

相当于

{app:app}

---

在您的版本2中，可以正确直接地访问const应用程序

如果您试图获取

app

的属性，则版本2是正确的。这与

render（）

大括号无关，但您正在向函数传递一个参数。

如果您试图获取

应用程序的属性，则版本2是正确的。这与
render（）
大括号无关，但您正在向函数传递一个参数