如何为功能性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以名称（而不是用户名）传递道具

改变这个

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