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

Question

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

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

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 而不是 用户名

改变这个

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

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

How can I implement destructuring assignment for functional react components props?

javascript

destructuring

ecmascript-6

reactjs