Как можно передать данные из родительского компонента в дочерний компонент через `children` в модальном окне?

  • 3 сентября 2023 г. 14:56
Ответы на вопрос 1
В родительском компоненте `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`, и они будут отображены внутри модального окна.
Похожие вопросы