Question

我有我的组件和故事书中的故事文件，该文件的渲染没有错误，但不可拖动。我将自己的研究从反应使用手势this example引入Github。我注意到，如果我使用create-react-app开始一个新项目并将此代码粘贴到那里，它会很好地工作，但是使用Storybook却无法工作。我还注意到，在我的代码中，元素看起来像<div style="x: 0px; y: 0px;"></div>而不是<div style="transform: none;"></div>（有效示例中的代码），我一直在研究并且找不到解决方案，所以我来问在这个很棒的社区的帮助下。

目标：要使用react-spring和react-use-gesture在react storybook上制作可拖动的卡片组件故事。

预期结果：能够拖动组件。

实际结果：该组件不可拖动

错误消息：无。

组件代码：

import React from 'react'
import { useSpring, animated } from 'react-spring'
import { useDrag } from 'react-use-gesture'

export function Card() {
  const [props,
    set] = useSpring(() => ({ x: 0, y: 0, scale: 1 }))
  const bind = useDrag(({ down, movement: [x, y] }) => {
    set({ x: down ? x : 0, y: down ? y : 0, scale: down ? 1.2 : 1 })
  })
  return <animated.div {...bind()} style={props} />
}

export default Card;

故事代码：

import React from 'react'
import { storiesOf } from '@storybook/react'
import Card from './Card'

import './card.css'

const Body = ({ children }: any) => (
  <div className="wrapper">
    <style
      dangerouslySetInnerHTML={{ __html: `body { margin: 0; }` }}
    />
    {children}
  </div>
)

storiesOf('UI Components | Card', module)
  .add("Simple Card", () => (
    <Body>
      <Card />
    </Body>
  ))

您可以为此检查我的github repo并运行npm install和npm run storybook 如果您只想检查代码，则Here is the folder包含^上方的代码。

Answer 1

我找到了解决方案，codesandbox使用的是useSpring的最新Beta。我的版本是：

    "react-spring": "^8.0.27",
    "react-use-gesture": "^6.0.14",

和解决方案

    "react-spring": "9.0.0-beta.34",
    "react-use-gesture": "latest"

也许这对其他人也有帮助。

反应使用手势不适用于Storybook

1 个答案: