如何使用 framer x 创建功能推送通知（在 x 时间后触发）组件？

Question

我正在尝试在 framer x（基于反应）中创建推送通知。

它应该像这样工作：

客户打开模型 > 后台计时器启动 > 计时器达到 5 并触发事件 > 事件触发推送框架 > 推送框架在屏幕上可见。

我已经玩了一段时间了，我就是想不通......

在我最后一次尝试中，我尝试通过更改不透明度来解决它，但我仍然无法更新 return 语句...

import * as React from "react"
import { Frame } from "framer"

export function DraggingA() {
    let counter = 0

    const style = {
        opacity: 0,
    }
    const modalComponentNew = (
        <Frame
            drag={true}
            dragConstraints={{ top: 0, right: 0, bottom: 0, left: 0 }}
            dragElastic={1}
            size={150}
            radius={25}
            background={"#06F"}
            center={true}
            opacity={style.opacity}
        />
    )

    let x = setInterval(function() {
        if (counter < 5) {
            counter++
            console.log(counter)
        }

        if (counter >= 5) {
            clearInterval(x)

            style.opacity = 1

            console.log("counter stops")
            return modalComponentNew
        }
    }, 1000)

    return modalComponentNew
}

Answer 1

如果您希望您的组件重新渲染，则必须将其转换为有状态的组件并在倒计时完成后调用 setState 或使用挂钩。

这是新的钩子语法：

import React, { useState } from 'react';

export function DraggingA() {
    let counter = 0

    const [opacity, setOpacity] = useState(0); //Create a hook, with 0 as a default value

    const modalComponentNew = (
        <Frame
            drag={true}
            dragConstraints={{ top: 0, right: 0, bottom: 0, left: 0 }}
            dragElastic={1}
            size={150}
            radius={25}
            background={"#06F"}
            center={true}
            opacity={opacity} //Gets the hook value
        />
    )

    let x = setInterval(() => { //Arrow function to keep the context
        if (counter < 5) {
            counter++
            console.log(counter)
        }

        if (counter >= 5) {
            clearInterval(x)

            setOpacity(1) //Sets your hook value and re-render your component

            console.log("counter stops")
        }
    }, 1000)

    return modalComponentNew
}