Reactjs 如何在HOC中使用React-Spring？

我确信这与我不完全理解React-Spring的工作原理或HOCs有关

我正在尝试为React创建一个HOC，它添加了React-Spring动画（从左侧滑入子组件）

我发现这个页面建议将其更改为const props：

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

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

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`.

因此，我不太确定如何使用React Spring获得一个HOC

---

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

定义如下：

 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（道具）{
const animationProps=useSpring({
from:{transform:“translate3d（-100%，0,0）”}，
到：{转换：“translate3d（0%，0,0）”}
});
返回{props.children}；
}

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

  <SlideLeft>
    <yourComponent/>
  </SlideLeft>

---

请注意，在

from

和

to

对象中，我使用相同的

单位

，即

百分比

。使用相同的单元很重要。如果您使用不同的单位，或传递的单位数较少，则无法使用。

您不能为此使用常量吗？@CecilRodriguez const在函数定义中？您可以这样做：

const SlideLeft=（props）=>{..

 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>