Как я могу реализовать назначение деструктурирования для реквизита функциональных компонентов реакции?

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

Вы пропускаете опору из Приложение как имя не имя пользователя

изменить это

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