如何为功能性反应组件道具实现解构分配？

Question

我正在尝试通过解构赋值方法传递功能组件道具。

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

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

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

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

关于如何处理这个问题的任何想法？

Answer 1

您从 App 传递的道具是 name 而不是 username

改一下

const App = ({ username : name })

到这里

const App = ({ name: username })

---

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

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

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