Javascript 我如何为功能组件道具实现分解分配？

我试图通过解构赋值方法传递功能组件道具

在下面的示例中，我尝试使用这个概念，但它不起作用。 此代码的结果返回空，不打印该道具

import React from 'react';
import { render } from 'react-dom';

const App = ({ username: name }) => (<h1>{username}</h1>)

render(
   <App name="Tom" />,
   document.getElementById('root')
);

从“React”导入React；
从'react dom'导入{render}；
常量应用=（{username:name}）=>（{username}）
渲染(
,
document.getElementById（'root'））
);

---

关于如何处理这个问题，你有什么想法吗？

你正在将应用程序的道具作为名称而不是用户名

改变这个

const App = ({ username : name })

对此

const App = ({ name: username })

---

从“React”导入React；
从'react dom'导入{render}；
常量应用=（{name:username}）=>（{username}）
渲染(
,
document.getElementById（'root'））
);

Tnx它正在工作。为什么它用某种opossit语法填充名称和用户名值？@SalarBahador语法是

{propertyName:reference variable}

您可以阅读更多信息，因此此结构与javascript中的其他对象结构不同？按照通常的方式，我们说像这样定义对象：

obj={key:value}

@SalarBahador这里您不是定义一个对象，而是从对象中选取值

import React from 'react';
import { render } from 'react-dom';

const App = ({ name: username }) => (<h1>{username}</h1>)

render(
   <App name="Tom" />,
   document.getElementById('root')
);