如何在 HOC 中使用 React Spring?

Question

我确信这与我不完全了解 React Spring 的工作原理或 HOC 有关。

我正在尝试为 React 创建一个 HOC 来添加 React Spring 动画(从左侧滑入子组件(

const SlideLeft = WrappedComponent => {
const [props] = useSpring({
translateX: "0",
from: { translateX: "1000vw" }
});
return (
<animated.div style={props}>
<WrappedComponent />
</animated.div>
);
};

然后稍后，在另一个组件中，我有这个：

<SlideLeft>
<Categories />
</SlideLeft>

我认为这会起作用，但相反，我得到了错误：

TypeError: arr[Symbol.iterator] is not a function

我发现这个页面建议将其更改为常量道具：

https://github.com/react-spring/react-spring/issues/616

但是，当我这样做时，我收到错误：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of `SlideLeft`.

所以我不太确定如何让 HOC 使用 React Spring。

任何信息都会很有启发性。

Answer 1

像这样定义包装器：

export function SlideLeft(props) {
const animationProps = useSpring({
from: { transform: "translate3d(-100%,0,0)" },
to: { transform: "translate3d(0%,0,0)" }
});
return <animated.div style={{ ...animationProps }}> {props.children} </animated.div>;
}

并从父组件调用，如下所示：

<SlideLeft>
<yourComponent/>
</SlideLeft>

请注意，在from和to对象中，我使用相同的unit，即percentage。使用相同的单位很重要。如果您使用不同的单位，或者传递无单位的数字，它将不起作用。