如何使用 framer x 创建功能性推送通知(在 x 时间后触发)组件?
How to create a functional push notification (that fires after x amount of time) component with framer x?
我正在尝试在 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
}
如果您希望您的组件重新呈现,您必须将其转换为有状态组件并在倒计时完成后调用 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
}
我正在尝试在 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
}
如果您希望您的组件重新呈现,您必须将其转换为有状态组件并在倒计时完成后调用 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
}