如何为功能性React组件props实施解构分配？

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 作为 名称 而不是 用户名 < / p>

更改此

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