如何在 TypeScript 中使用 react-use-gesture 和 useSpring？

Question

我正在尝试在 TypeScript 中实现 react-use-gesture 和 react-spring 的类似实现。我尝试转换的 JavaScript 中的示例是 https://codesandbox.io/s/cards-fduch

我收到这张空白卡片，但当我查看 HTML 元素时，我可以看到卡片正在呈现。为什么他们不可见？

我对 TypeScript 的尝试就在这里。

 const to = (i:number) => ({ x: 0, y: i * -4, scale: 1, rot: -10 + Math.random() * 20, delay: i * 100 })
      const from = (i:number) => ({ x: 0, rot: 0, scale: 1.5, y: -1000 })
    const Card:React.FC<Props> = ({ items1}) => {
      const items = [
        'https://upload.wikimedia.org/wikipedia/en/f/f5/RWS_Tarot_08_Strength.jpg',
        'https://upload.wikimedia.org/wikipedia/en/5/53/RWS_Tarot_16_Tower.jpg'
        
      ]
      
     
      const [trans, setTrans] = React.useState( "translateX(0px)");
      
      const [gone] = React.useState(() => new Set()) 
      const [props, set] = useSprings(items.length, (i:number) => ({ ...to(i), from: from(i) })) 
    
      const bind = useDrag(({ args: [index], down, movement: [mx], direction: [xDir], velocity }) => {
          const trigger = velocity > 0.2 
        const dir = xDir < 0 ? -1 : 1 
        if (!down && trigger) gone.add(index) // If button/finger's up and trigger velocity is reached, we flag the card ready to fly out
        set((i) => {
          if (index !== i) return // We're only interested in changing spring-data for the current spring
          const isGone = gone.has(index)
          const x = isGone ? (200 + window.innerWidth) * dir : down ? mx : 0 
          const rot = mx / 100 + (isGone ? dir * 10 * velocity : 0) 
          const scale = down ? 1.1 : 1 
          return { x, rot, scale, delay: undefined, config: { friction: 50, tension: down ? 800 : isGone ? 200 : 500 } }
        })
      });
    
     
      return <>{props.map(({ x, y }, i) => (
        
        <animated.div key={i} style={{ x, y }}>
          {/* This is the card itself, we're binding our gesture to it (and inject its index so we know which is which) */}
          <animated.div {...bind(i)} style={{ backgroundImage: `url(${items[i]})` }} />
        </animated.div>
      ))}</>
      
    
    };  
    export default Card;

Answer 1

此 sandbox 使用较新的 @use-gesture/react 并且使用打字稿。

此外，到今天为止还没有指向维基百科的特定图像链接。这也可能是您没有看到任何渲染图像的原因

如何在 TypeScript 中使用 react-use-gesture 和 useSpring？

How to use react-use-gesture and useSpring in TypeScript?

typescript

react-spring

react-use-gesture