«Компоненты React в компонентах» относятся к практике использования компонентов React в качестве строительных блоков внутри других компонентов React. Это позволяет создавать модульную и многократно используемую структуру кода в приложениях React. Вот несколько методов, которые можно использовать для реализации этой концепции:

1. Композиция: компоненты React могут быть составлены вместе путем вложения одного компонента в другой. Это делается путем рендеринга компонента внутри JSX другого компонента. Например:

function ParentComponent() {
  return (
    <div>
      <h1>Parent Component</h1>
      <ChildComponent />
    </div>
  );
}
function ChildComponent() {
  return <p>Child Component</p>;
}

2. Props: компоненты могут принимать реквизиты (свойства) для динамической настройки своего поведения и содержимого. Реквизиты могут передаваться из родительского компонента в дочерний компонент, что позволяет дочернему компоненту отображаться по-разному в зависимости от полученных данных. Например:

function ParentComponent() {
  return <ChildComponent name="John" />;
}
function ChildComponent(props) {
  return <p>Hello, {props.name}!</p>;
}

3. Компоненты высшего порядка (HOC): HOC — это функции, которые принимают компонент в качестве входных данных и возвращают новый расширенный компонент. Их можно использовать для добавления дополнительных функций или изменения поведения компонента. HOC обычно используются для таких задач, как обработка аутентификации, выборка данных или повторное использование кода. Вот пример:

function withLogger(WrappedComponent) {
  return function WithLogger(props) {
    console.log('Component rendered:', WrappedComponent.name);
    return <WrappedComponent {...props} />;
  };
}
function MyComponent() {
  return <p>My Component</p>;
}
const EnhancedComponent = withLogger(MyComponent);

4. Фрагменты React: Фрагменты позволяют группировать несколько компонентов без введения дополнительных элементов DOM. Они полезны, когда вы хотите вернуть несколько компонентов из метода рендеринга компонента без добавления дополнительных элементов-оберток. Вот пример:

function ParentComponent() {
  return (
    <>
      <ChildComponent1 />
      <ChildComponent2 />
    </>
  );
}