问题标签 [react-pose]

在我的 React 应用程序中，我正在尝试将 JS react-pose-@reach/router示例转换为 TypeScript，但它不起作用。

以下是 中的相关类型react-pose：

JS 示例如下所示：

来源：https ://popmotion.io/pose/examples/route-transitions-reach-router/

我被困在这里：

上面<RouteContainer key={location.key}>写着：

类型 'ComponentType<{ [key: string]: any; 孩子？：任何；姿势？：字符串| 字符串[] | 不明确的; _pose?: 字符串 | 字符串[] | 不明确的; 初始姿势？：字符串 | 字符串[] | 不明确的; withParent?: 布尔值 | 不明确的; onPoseComplete?: ((pose: string | string[]) => any) | 不明确的; onValueChange?: { ...; } | 不明确的; innerR...' 不可分配给类型 'ComponentFactory>'。类型 'ComponentClass<{ [key: string]: any; 孩子？：任何；姿势？：字符串| 字符串[] | 不明确的; _pose?: 字符串 | 字符串[] | 不明确的; 初始姿势？：字符串 | 字符串[] | 不明确的; withParent?: 布尔值 | 不明确的; onPoseComplete?: ((pose: string | string[]) => any) | 不明确的; onValueChange?: { ...; } | 不明确的; inner...' 不能分配给类型 'ComponentFactory>'。键入'组件类< { [键：字符串]：任何；孩子？：任何；姿势？：字符串| 字符串[] | 不明确的; _pose?: 字符串 | 字符串[] | 不明确的; 初始姿势？：字符串 | 字符串[] | 不明确的; withParent?: 布尔值 | 不明确的; onPoseComplete?: ((pose: string | string[]) => any) | 不明确的; onValueChange?: { ...; } | 不明确的; inner...' 不提供签名匹配 '(poseConfig?: DomPopmotionConfig | DomPopmotionConfigFactory> | undefined): ComponentType<{ [key: string]: any; 孩子？：任何；姿势？：字符串| 字符串[] | 不明确的; _pose?: 字符串 | 字符串[] | 不明确的; ... 4 更多 ...; innerRef?: { ...; } | ... 1 更多 ... | 不明确的; } & PoseContextProps & HTMLProps<...>>'。字符串 | 字符串[] | 不明确的; withParent?: 布尔值 | 不明确的; onPoseComplete?: ((pose: string | string[]) => any) | 不明确的; onValueChange?: { ...; } | 不明确的; inner...' 不提供签名匹配 '(poseConfig?: DomPopmotionConfig | DomPopmotionConfigFactory> | undefined): ComponentType<{ [key: string]: any; 孩子？：任何；姿势？：字符串| 字符串[] | 不明确的; _pose?: 字符串 | 字符串[] | 不明确的; ... 4 更多 ...; innerRef?: { ...; } | ... 1 更多 ... | 不明确的; } & PoseContextProps & HTMLProps<...>>'。字符串 | 字符串[] | 不明确的; withParent?: 布尔值 | 不明确的; onPoseComplete?: ((pose: string | string[]) => any) | 不明确的; onValueChange?: { ...; } | 不明确的; inner...' 不提供签名匹配 '(poseConfig?: DomPopmotionConfig | DomPopmotionConfigFactory> | undefined): ComponentType<{ [key: string]: any; 孩子？：任何；姿势？：字符串| 字符串[] | 不明确的; _pose?: 字符串 | 字符串[] | 不明确的; ... 4 更多 ...; innerRef?: { ...; } | ... 1 更多 ... | 不明确的; } & PoseContextProps & HTMLProps<...>>'。| undefined): ComponentType<{ [key: string]: any; 孩子？：任何；姿势？：字符串| 字符串[] | 不明确的; _pose?: 字符串 | 字符串[] | 不明确的; ... 4 更多 ...; innerRef?: { ...; } | ... 1 更多 ... | 不明确的; } & PoseContextProps & HTMLProps<...>>'。| undefined): ComponentType<{ [key: string]: any; 孩子？：任何；姿势？：字符串| 字符串[] | 不明确的; _pose?: 字符串 | 字符串[] | 不明确的; ... 4 更多 ...; innerRef?: { ...; } | ... 1 更多 ... | 不明确的; } & PoseContextProps & HTMLProps<...>>'。

这让我很困惑，因为打字看起来是正确的。我不想在这里使用匿名签名并在打字时保持强势。

我该如何解决这个问题？

我正在使用Popmotion、Pose和flubberpaths在 React Route 更改之间对 SVG 的两个进行变形和过渡。

这完美地工作

路径定义为

在路线更改时，效果是

但是，我怎么能在所有其他时间之间循环paths[id].path和变形。paths[id].pathAlt例如，我试图通过不断移动的codrops 来实现此处显示的结果。svg

我有以下代码，它应该Container在 3 秒后为组件呈现一个简单的淡入淡出动画。但是，该组件在淡入之前闪烁完全可见。我的问题是：为什么会发生这种情况，我该如何阻止它发生？

我正在尝试在反应中创建一个组件，该组件在需要时会折叠和扩展。为此，我正在使用 react-pose。但是，我在尝试嵌套多个此组件时遇到了问题。

这是我定义组件的方式：

这就是我使用它的地方。

我遇到的问题是外部<CollapsableDiv>“姿势”似乎传递给了内部“姿势”，这意味着当您扩展外部 div 时，内部 div 也会扩展。内在<CollapsableDiv>似乎对外在没有同样的影响。

这是问题的示例https://codesandbox.io/s/x7nljvom9z?fontsize=14

我在这里做错了吗？不能重复使用相同的组件吗？

我是反应js的新手。最近我浏览了 react js文档和 react-pos文档。我已经实现了以下代码段。但是当我运行它时，它在浏览器中没有任何影响。我哪里错了？

我是新手，react-pose我尝试了一个简单的事情，但过渡不起作用。

我只想在两种状态之间进行转换。

喜欢opacity 0 => 1

我想将它与 const 一起使用，所以我使用了新的 react 钩子。

一切正常，但这段代码就像我设置的一样transition: 0s

你能帮助我吗 ？

我已经按照文档和这篇博客文章进行了操作，但我正在努力让任何工作正常进行。

在本地，我收到以下错误：HEY, LISTEN! No valid DOM ref found. If you're converting an existing component via posed(Component), you must ensure you're passing the ref to the host DOM node via the React.forwardRef function.

所以我试图转发参考：

哪个正在工作，因为我能够console.log在ref我的父组件内部：

ColorCheckbox {props: Object, context: Object, refs: Object, updater: Object, setRef: function ()…} "ref"

但是，我仍然收到No valid DOM ref found....

这是一个简单的 Codesandbox 描述我的问题。

关于 Codesandbox：

我在此沙盒中遇到跨域错误（它们不会在本地发生）。如果您将第 14 行更改ColorCheckbox为跨域错误...

有任何想法吗？

我正在使用带有react-pose 的TypeScript，并且需要定义道具的类型。这是我刚从create-react-app3.0.1 版本开始的应用程序。

我不断收到错误Parameter 'props' implicitly has an 'any' type.

我试过在 div 上定义类型，类似于styled-components：

我还尝试定义一个组件来代替posed.div：

并通过它：

我在这里想念什么？

我已经有这个问题一个多月了，一遍又一遍地用新的想法回到它，但我无法解决解决方案。必须有一个，这是微不足道的！

我的目标是通常从左滑入页面并向右滑出。当它反转时（用户单击后退按钮或历史记录通知已弹出路线），页面应向右退出，下一条路线应从左侧（相反）进入。

一切正常，但是当我 PUSH 一条路线然后 POP 一条路线时，下一页将向右退出并从右侧进入。进入页面在有时间更新之前使用旧姿势。如果我再弹出一次，它就会正常工作，新页面从左侧滑动，而旧页面从右侧退出。这只是我第一次使用 POP 进行更改。我非常依赖 const reverse 值。该组件仅在我更改路由时呈现一次，并且在我第一次单击 POP 时 reverse = true。

我有一个像这样的 AnimatedSwitch 组件

这是 ContextRouteAnimation 姿势组件：

我尝试了多种方法，例如

• 将反向传递给 ContextRouteAnimation 并使用 preEnter + exit 姿势。
• 直接在 ContextRouteAnimation 上设置姿势
• 将组件存储为状态，仅在更新新姿势后更新它，然后触发另一个渲染

AnimDiv似乎不会随着pose变量的变化而改变其样式。同样的方法适用于父母，但是孩子似乎只接受传递给它的任何东西的初始值pose，然后在随后的重新渲染中不关心它。

为什么呢？

编辑：它确实响应姿势变化，但无论出于何种原因，它都不会切换背景。例如，不透明度就起作用了。