Как передать компонент в качестве реквизита в React

Во-первых, нам нужно создать компонент, который будет получать другой компонент в качестве реквизита. Вот пример кода для компонента, который получает `ChildComponent` в качестве реквизита:

import React from 'react';

function ParentComponent(props) {
  return (
    <div>
      <h1>Parent Component</h1>
      {props.childComponent}
    </div>
  );
}

export default ParentComponent;

Передача компонента в качестве реквизита

Теперь давайте передадим «ChildComponent» в качестве реквизита «ParentComponent». Вот пример кода, который передает `ChildComponent` в качестве реквизита `ParentComponent`:

import React from 'react';
import ParentComponent from './ParentComponent';
import ChildComponent from './ChildComponent';

function App() {
  return (
    <div>
      <ParentComponent childComponent={<ChildComponent />} />
    </div>
  );
}

export default App;

В приведенном выше коде мы импортируем `ParentComponent` и `ChildComponent`. Затем мы передаем ChildComponent в качестве реквизита ParentComponent, заключая его в фигурные скобки и передавая в качестве значения реквизита childComponent.

Доступ к переданному компоненту

Наконец, давайте посмотрим, как получить доступ к переданному компоненту в `ParentComponent`. Мы можем получить доступ к переданному компоненту, визуализируя его с помощью синтаксиса `{props.childComponent}`. Вот пример кода, который отображает переданный компонент:

import React from 'react';

function ParentComponent(props) {
  return (
    <div>
      <h1>Parent Component</h1>
      {props.childComponent}
    </div>
  );
}

export default ParentComponent;

В приведенном выше коде мы используем синтаксис `{props.childComponent}` для рендеринга переданного компонента.

Вот и все! Теперь вы знаете, как передать компонент в качестве реквизита в React. Это мощная функция, позволяющая создавать повторно используемые компоненты и делать ваш код более модульным и удобным в сопровождении.