Как передать данные в модальное окно через children?

В React есть несколько способов передать данные в модальное окно через children. Один из способов - это использовать свойства (props).

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

Вот пример кода:

// Modal.js
import React from 'react';

const Modal = ({ children, data }) => {
  return (
    <div className="modal">
      {/* рендерим переданные дети */}
      {children}
      {/* Рендерим дополнительные данные */}
      <p>{data}</p>
    </div>
  );
};

export default Modal;

Теперь, когда мы используем компонент Modal, мы можем передать в него данные через children:

import React from 'react';
import Modal from './Modal';

const App = () => {
  const additionalData = 'Дополнительные данные';
  
  return (
    <div>
      <Modal data={additionalData}>
        <h1>Заголовок модального окна</h1>
        <p>Текст в модальном окне</p>
      </Modal>
    </div>
  );
};

export default App;

В компоненте App мы создаем переменную additionalData и передаем ее в свойство data компонента Modal. Далее, мы передаем желаемый контент внутрь компонента Modal через его детей.

Внутри компонента Modal мы выводим переданные дети с помощью {children} и затем рендерим дополнительные данные, передаваемые через свойство data.

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