0

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 では、トランジションとアニメーションはありません。

このコードを最新バージョンにアップグレードするにはどうすればよいですか?

4

1 に答える 1

0

バージョン 8 では、react-spring/renderprops から renderProps API にアクセスできます。したがって、次のインポートを試すことができます。

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

フック API を試すこともできます。コードはもっとシンプルだと思います。気に入っています。

于 2019-05-28T14:25:15.583 に答える