使用挂钩 useEffect() 在 GatsbyJS (ReactJS) 中加载页面 3 秒后显示弹出窗口

Question

我有一个基于 Gatsby JS 的网站，我试图在索引页面加载 3 秒后实现 modal/popup 的加载。

到目前为止，这是我的代码：

index.js

const HomePage = ({ data }) => {

  const { t } = useTranslation();

  useEffect(() => {
    setTimeout(() => <Modal
    component={<FormA />}
   />, 3000);

  }, []);

  return (

     <Layout>
       ...
     </Layout>
  )
}

modal.js

const Modal = (props) => {

return (

    <div className='modal'>
        <div className="modal-background"></div>
        <div className="modal-content">{props.component}</div>
    </div>

  )
}

export default Modal

未检测到错误，但模态框未显示。

有线索吗？谢谢。

Answer 1

Modal 没有出现，因为你没有从你的组件在 JSX 中返回它。 setTimeout的回调函数返回Modal没用

要获得预期结果，请在您的组件中创建一个初始设置为 false 的状态。

const [showModal, setShowModal] = useState(false);

然后在useEffect钩子里面，三秒后设置为true。

useEffect(() => {
    setTimeout(() => showModal(true), 3000);
}, []);

现在要显示模式，有条件地在组件的 JSX 中呈现它。

return (
   <Layout>
     { showModal ? <Modal/> : null }
     ...
   </Layout>
)

Answer 2

我们可以使用一个本地状态变量，它最初是 false 并且在组件安装之后我们将使该变量成为 true 然后我们将在组件卸载时清除超时。

function HomePage() {
  const [showModal, setShowModal] = useState(false)

  useEffect(() => {
    const timeId = setTimeout(() => setShowModal(true), 3000)

    return () => clearTimeout(timeId)
  })

  return (
     <Layout>
        {showModal && <Modal />}
     </Layout>
  )
}

你可以做的一个建议是，让你的 Modal 组件采用像 showModal 这样的道具，当 showModal 将为假。

 function Modal({ showModal }) {
  if(!showModal) {
    return null
  }
  return (
    <div>Your Modal</div>
  )
}

你可以这样使用它：-

  function HomePage() {
      const [showModal, setShowModal] = useState(false)
    
      useEffect(() => {
        const timeId = setTimeout(() => setShowModal(true), 3000)
    
        return () => clearTimeout(timeId)
      })
    
      return (
         <Layout>
            <Modal showModal={showModal} />
         </Layout>
      )
    }

使用挂钩 useEffect() 在 GatsbyJS (ReactJS) 中加载页面 3 秒后显示弹出窗口

Showing a popup after 3 seconds from page load in GatsbyJS (ReactJS) using the hook useEffect()

popup

reactjs

gatsby

react-hooks

use-effect