reactjs - 升级使用动画的 react-spring 代码并过渡到最新的 react-spring

Question

我有这个使用 react-spring 4.0.1 代码的代码：

export const Nodes: React.FunctionComponent<NodesProps> = ({nodes, nodeClickHandler}) => {
  return (
    <Transition
      native={true}
      items={nodes}
      keys={keyAccessor}
      config={{ tension: 1000, friction: 130, mass: 5 }}
      from={(node: HierarchyPointNode<GraphicalNode>) => {
        const parentTopLeft = !!node.parent
                              ? {left: node.parent.x, top: node.parent.y}
                              : {left: 0, top: 0};
        return {
          left: parentTopLeft.left,
          opacity: 0,
          top: parentTopLeft.top,
        };
      }}
      enter={(node: HierarchyPointNode<GraphicalNode>) => {
        return {
          left: node.x,
          opacity: 1,
          top: node.y,
        };
      }}
      update={(node: HierarchyPointNode<GraphicalNode>) => {
        return {
          left: node.x,
          opacity: 1,
          top: node.y,
        };
      }}
      leave={(node: HierarchyPointNode<GraphicalNode>) => {
          return {
            left: node.x,
            opacity: 0,
            top: node.y,
          };
      }}
    >
    {nodes.map((node: HierarchyPointNode<GraphicalNode>) => (styles: CSSProperties) => {
        const key = keyAccessor(node);
        return (
          <animated.g
            className="cx-group"
            style={{
              cursor: "pointer",
              pointerEvents: (styles.opacity as any).interpolate((v: any) => v < 0.5 ? "none" : "all") }
            }
            width={40}
            height={20}
            opacity={styles.opacity}
            transform={template`translate(${styles.left}, ${styles.top})`}
            key={keyAccessor(node)}
          >
            <Node node={node} nodeClickHandler={nodeClickHandler} key={key} />
          </animated.g>
        );
      })}
    </Transition>
  );
};

在 react-spring 8 中，没有过渡和动画。

如何将此代码升级到最新版本。

Answer 1

在版本 8 中，可以从 react-spring/renderprops 访问 renderProps api。因此，您可以尝试以下导入。

import {Transition, animated} from 'react-spring/renderprops';

你也可以试试 hooks api。我认为代码更简单，我喜欢它。