Изменить родительское состояние от дочернего (где оба являются функциональными компонентами) - PullRequest
Новая
       18

Изменить родительское состояние от дочернего (где оба являются функциональными компонентами)

1 голос
/ 14 марта 2020

Схема для следующей задачи выглядит следующим образом: 

.
├── components
│   ├── ModalPolicy.js
│   ├── Footer
│       ├── index.js
├── pages
│   ├── index.js

Я пытался отобразить модал на Footer/index.js, но он не появился (как у нас в pages/index.js делает).

Поэтому я хотел бы не только визуализировать мой модальный 'antd' на pages/index.js, но и удерживать состояние модального режима (открыто против закрытого) на pages/index.js, оставляя его "открытым" метод запускается с кнопки в Footer/index.js, поскольку там уже живут наши ссылки Footer-i sh.

Недостатком является то, что все компоненты, вовлеченные в эту проблему, являются функциональными компонентами, и каждое найденное мной решение в inte rnet рассматриваются случаи, когда родитель (или оба) является (являются) компонентом (ами) класса. Общая суть того, что я хотел бы сделать sh, такова:

компоненты / нижний колонтитул / индекс. js

// imports..

const Footer = (openModalHandler) => {
  return (
    <section id="footer">
      <Layout>
        <div className="content">
          <a href="#footer" onclick={openModalHandler}>
            Policy
          </a>
        </div>
      </Layout>
    </section>
  )
}

страницы / индекс. js (следующий. js) 

// imports..
import Footer from '../components/Footer'
import ModalPolicy from '../components/ModalPolicy'

const Index = () => {
   const [openPolicy, setOpenPolicy] = React.useState(false)
   const closeModalPolicy = () => { /* Called by the Modal itself, don't bother with this */
      setOpenPolicy(false)     
   }
   const openModalHandler = () => { /* Called in Footer/index.js */
      setOpenPolicy(true)
   }

   return (
      <>
        <Some />
        <Other />
        <Stuff />
        <ModalPolicy open={openPolicy} onClose={closeModalPolicy} />
        <Footer openModalHandler={openModalHandler}
      </>
   )
}

компонентов / ModalPolicy. js

// imports..
import { Modal, Button } from 'antd'

const ModalPolicy = ({ t, open, onClose }) => {
   return (
      <Modal
        title="Política de uso y privacidad"
        visible={open}
        onCancel={onClose}
        footer={null}
        width="fit-content">
          dangerouslySetInnerHTML={{
            __html: 
              `<h1>I'd really like to use dangerouslySetInnerHTML here</h1>
               <h2>It would make things a lot easier (assuming it won't look like crap on the browser)</h2>
              `
          }}
      </Modal>
  )
}

Примечания Я не совсем уверен, действительно ли мне нужно визуализировать модал на pages / index. js, чтобы он правильно отображался. На самом деле, я довольно неопытен с React (поскольку я бэкэнд-разработчик) и со стороны браузера javascript в целом.

Если есть более простой способ сделать это sh, пожалуйста, позвольте мне знать.

Спасибо!

1 Ответ

1 голос
/ 14 марта 2020

Проблема в том, что вы забыли деструктурировать свойства из реквизита компонента Footer. Прямо сейчас вы не передаете отдельную функцию через обработчик щелчка, а скорее объект с функцией.

aka изменить const Footer = (openModalHandler) на const Footer = ({openModalHandler})

const Footer = ({openModalHandler}) => {
----------------^----------------^ // curly brackets to desturcture
  return (
    <section id="footer">
      <Layout>
        <div className="content">
          <a href="#footer" onClick={openModalHandler}>
------------------------------^------ // capitalize the c (camelCase properties)
            Policy
          </a>
        </div>
      </Layout>
    </section>
  )
}

Без разрушения параметра для компонента нижнего колонтитула props, который реагирует, получает, который является объектом с ключом openModalHandler

Играйте с ним вживую, если хотите:)

...