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

Реквизиты позволяют нам передавать данные в компоненты, чтобы мы могли повторно использовать их и создавать интерактивные приложения в React.

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

Существует несколько способов передачи компонентов через реквизиты. Начнем с самого простого подхода.

Передавать компоненты как реквизиты.

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

Давайте рассмотрим пример:

function App() {
  return (
    <div className="App">
      <Header text={<Text />} />
    </div>
  );
}
function Header({ text }) {
  return <div>{text}</div>;
}

Компонент Header будет отображать компонент Text.

Убедитесь, что имя компонента написано с заглавной буквы. После передачи дочерний компонент (в данном случае Header) может получить доступ к компоненту через реквизит.

Вы даже можете установить реквизиты для компонента, который передаете через реквизит. Вот живой пример из CodeSandbox.

В этом примере мы передаем свойство color, чтобы настроить цвет текста.

Это довольно простой и понятный способ передачи компонентов через реквизиты.

Теперь давайте рассмотрим другой, возможно, лучший способ передачи нескольких компонентов через реквизиты.

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

Предположим, у вас есть контейнер и вы хотите изменить его содержимое в зависимости от URL-адреса, ввода пользователя или любого другого фактора.

Интерфейс children позволяет динамически передавать ему определенный набор компонентов и элементов.

Синтаксис использования свойства children прост — просто включите компоненты между открывающим и закрывающим тегами компонента.

function App() {
  return (
    <div>
      <Header>
        <Text />
        <Button />
      </Header>
    </div>
  );
}
function Header({ children }) {
  return <div>{children}</div>;
}

function Text(props) {
  return <h1 style={{ color: props.color }}>Hello World</h1>;
}

function Button(props) {
  return <button>Click</button>;
}

Компонент Header автоматически отображает все компоненты, передаваемые между его открывающим и закрывающим тегами, при его вызове.

Примечание. В компоненте Header мы используем синтаксис деструктуризации для доступа к свойству children props. Обычно вы получаете к нему доступ через props.children.

Какой способ лучше передать компоненты в качестве реквизита?

Передача компонентов напрямую или через свойство children имеет свои преимущества и недостатки.

Свойство children проще и читабельнее, если у вас несколько компонентов или сложный код. Его недостатком является то, что все компоненты, передаваемые через дочерние элементы, собираются вместе. Вы не можете разбить свойство children и разместить различные группы в разных местах дочернего компонента.

Лучше передавать компоненты напрямую через свойства, поскольку вы можете получить доступ к отдельным компонентам и вызывать их в разных местах дочернего компонента.

Если вы хотите узнать больше, посетите мой блог, где я публикую десятки руководств по React, подобных этому.