В родительском компоненте `App` можно передать данные в дочерний компонент `Modal` через `children` следующим образом:
```jsx
const App = () => {
const [modalData, setModalData] = useState(null)
const [isModalActive, setIsModalActive] = useState(false)
const openModal = (content) => {
setModalData(content)
setIsModalActive(true)
}
const closeModal = () => {
setModalData(null)
setIsModalActive(false)
}
return (
<>
<First />
<Second />
{isModalActive && (
<Modal>
{modalData}
</Modal>
)}
</>
)
}
```
В данном примере, когда открывается модальное окно, переданные данные `modalData` будут отображены внутри компонента `Modal` через `children`.
Чтобы наполнить модальное окно компонентами `First` и `Second`, можно сделать следующее:
```jsx
const App = () => {
const [modalData, setModalData] = useState(null)
const [isModalActive, setIsModalActive] = useState(false)
const openModal = (content) => {
setModalData(content)
setIsModalActive(true)
}
const closeModal = () => {
setModalData(null)
setIsModalActive(false)
}
return (
<>
<First />
<Second />
{isModalActive && (
<Modal>
<First />
<Second />
</Modal>
)}
</>
)
}
const Modal = ({ children }) => {
return createPortal((
<>
{children}
</>
), document.body)
}
```
В данном примере, компоненты `First` и `Second` передаются в `Modal` через `children`, и они будут отображены внутри модального окна.