javascript - 如何为功能性 React 组件 Prop 实现解构分配？

Question

我正在尝试通过解构分配 方法传递功能组件 Prop 。

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

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 传递 prop 作为 name 而不是 username/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')
);