从子状态更改父状态（两者都是功能组件）

Question

以下问题的布局如下所示：

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

我尝试在 Footer/index.js 上渲染模态框，但它没有显示（正如我们在 pages/index.js 中显示的那样）。

因此，我不仅想在 pages/index.js 上呈现我的 'antd' 模态，而且还想在 pages/index.js 上保持模态状态（打开与关闭），同时让它处于 "open" 方法从 Footer/index.js 中的按钮触发，因为那是我们的页脚链接已经存在的地方。

障碍是这个问题中涉及的所有组件都是功能组件，我在互联网上找到的每个解决方案都解决了父（或两者）是（是）class-组件（秒）。我想要完成的大致要点如下：

components/Footer/index.js

// imports..

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

pages/index.js (next.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}
      </>
   )
}

components/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 非常缺乏经验。

如果有更简单的方法来完成此操作，请告诉我。

谢谢！

Answer 1

问题是您忘记了从 Footer 组件的道具中解构属性。现在您不是在单击处理程序上传递单个函数，而是传递具有该函数的对象。

也就是将 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>
  )
}

没有解构你的页脚组件的参数是 react 接收的 props，它是一个带有键 openModalHandler

的对象

Play with it live if you'd like :)

从子状态更改父状态（两者都是功能组件）

Change parent state from child (where both are functional components)

javascript

reactjs

next.js

react-functional-component