В React передача реквизитов (сокращенно от свойств) — это фундаментальный способ обмена данными между компонентами. Часто вам может потребоваться передать несколько реквизитов дочернему компоненту. В этой статье мы рассмотрим различные методы достижения этой цели в React, а также приведем примеры кода. Давайте погрузимся!

Метод 1: передача отдельных реквизитов
Самый простой способ передать несколько реквизитов — указать каждый реквизит отдельно при рендеринге дочернего компонента. Вот пример:

// Parent Component
import React from 'react';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {
  const prop1 = 'Value 1';
  const prop2 = 'Value 2';
  const prop3 = 'Value 3';
  return <ChildComponent prop1={prop1} prop2={prop2} prop3={prop3} />;
};
export default ParentComponent;
// Child Component
import React from 'react';
const ChildComponent = ({ prop1, prop2, prop3 }) => {
  return (
    <div>
      <p>{prop1}</p>
      <p>{prop2}</p>
      <p>{prop3}</p>
    </div>
  );
};
export default ChildComponent;

Метод 2: оператор расширения
Другой подход — использовать оператор распространения (...) для передачи всех реквизитов из объекта. Это может быть полезно, если у вас большое количество реквизитов или когда реквизиты генерируются динамически. Вот пример:

// Parent Component
import React from 'react';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {
  const props = {
    prop1: 'Value 1',
    prop2: 'Value 2',
    prop3: 'Value 3',
  };
  return <ChildComponent {...props} />;
};
export default ParentComponent;
// Child Component (same as before)
import React from 'react';
const ChildComponent = ({ prop1, prop2, prop3 }) => {
  return (
    <div>
      <p>{prop1}</p>
      <p>{prop2}</p>
      <p>{prop3}</p>
    </div>
  );
};
export default ChildComponent;

Метод 3: Деструктуризация реквизита
Вы также можете деструктурировать реквизит непосредственно в сигнатуре функции дочернего компонента. Этот подход позволяет вам получить доступ к реквизитам напрямую, не используя объект props. Вот пример:

// Parent Component
import React from 'react';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {
  const prop1 = 'Value 1';
  const prop2 = 'Value 2';
  const prop3 = 'Value 3';
  return <ChildComponent prop1={prop1} prop2={prop2} prop3={prop3} />;
};
export default ParentComponent;
// Child Component
import React from 'react';
const ChildComponent = (props) => {
  const { prop1, prop2, prop3 } = props;
  return (
    <div>
      <p>{prop1}</p>
      <p>{prop2}</p>
      <p>{prop3}</p>
    </div>
  );
};
export default ChildComponent;

Метод 4: использование контекстного API
Если у вас глубоко вложенное дерево компонентов, использование контекстного API может быть целесообразным вариантом. Контекст позволяет передавать значения вниз по дереву компонентов без явной передачи реквизитов на каждом уровне. Вот пример:

// Parent Component
import React from 'react';
import ChildComponent from './ChildComponent';
export const MyContext = React.createContext();
const ParentComponent = () => {
  const prop1 = 'Value 1';
  const prop2 = 'Value 2';
  const prop3 = 'Value 3';
  return (
    <MyContext.Provider value={{ prop1, prop2, prop3 }}>
      <ChildComponent />
    </MyContext.Provider>
  );
};
export default ParentComponent;
// Child Component
import React from 'react';
import { MyContext } from './ParentComponent';
const ChildComponent = () => {
  return (
    <MyContext.Consumer>
      {(context) => (
        <div>
          <p>{context.prop1}</p>
          <p>{context.prop2}</p>
          <p>{context.prop3}</p>
        </div>
      )}
    </MyContext.Consumer>
  );
};
export default ChildComponent;

Передача нескольких реквизитов дочерним компонентам в React может выполняться с использованием различных методов, таких как передача отдельных реквизитов, оператор распространения, реквизиты деструктуризации и контекстный API. Каждый метод имеет свои варианты использования и преимущества. Используя эти методы, вы можете эффективно управлять данными и обмениваться ими между компонентами ваших приложений React.