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

我发现此页面建议将其更改为仅const props：

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

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

任何信息都会照亮。

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。使用同一单元很重要。如果您使用其他单位，或传递无单位的数字，将无法使用。

如何在HOC中使用React Spring？

1 个答案: