Как происходит деструктуризация в этом конкретном примере?

Я новичок в реагировании, и я пытаюсь создать компонент дерева папок в реакции.

Я следую этому руководству - связь

код можно посмотреть здесь - песочница

Я смущен тем, как происходит разрушение в этом случае

const Tree = ({ data, children }) => {
  const isImparative = data && !children;

  return (
    <StyledTree>
      {isImparative ? <TreeRecursive data={data} /> : children}
    </StyledTree>
  );
};

Tree.File = File;
Tree.Folder = Folder;

const structure = [
  {
    type: "folder",
    name: "src",
    childrens: [
      {
        type: "folder",
        name: "Components",
        childrens: [
          { type: "file", name: "Modal.js" },
          { type: "file", name: "Modal.css" }
        ]
      },
      { type: "file", name: "index.js" },
      { type: "file", name: "index.html" }
    ]
  },
  { type: "file", name: "package.json" }
];

export default function App() {
  return (
    <div className="App">
      <Tree data={structure} />
    </div>
  );

Я запутался в этой конкретной строке

const Tree = ({ data, children }) => {

Как происходит ее разрушение?

Вы уничтожаете { data, children } из structure массива.

Как он автоматически решает, что выбрать внутри структуры для данных и что выбрать для дочерних элементов?

Также нет поля с именем data и дочерние элементы. Так как это здесь работает?

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
0
0
44
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Когда вы определяете компонент (здесь это дерево), он может ожидать реквизиты. Внутри реквизита есть все различные свойства, которые мы передаем, например, для нижеприведенного data это реквизит.

 <Tree data={structure} />

Итак, деструктуризация сделана для реквизита. если вы удалите объект для const Tree = ({ data, children }) и напишите вместо него реквизит и проверите, вы увидите разные реквизиты, переданные компоненту.

Если бы это было так, как показано ниже, был бы еще один компонент, называемый дочерними элементами, который содержал бы <div>My child</div>. Это полезно для создания повторно используемых компонентов.

 <Tree data={structure}><div>My child</div><Tree/>

Другие вопросы по теме