React-use-gesture 不适用于 Storybook

Question

我有我的组件和故事书 stories 文件，它呈现没有错误但不可拖动。我的学习基础是 this example from the react-use-gesture Github。我注意到如果我使用 create-react-app 开始一个新项目并将此代码粘贴到那里它工作正常，但使用故事书它不起作用。我还注意到在我的代码中元素看起来像 <div style="x: 0px; y: 0px;"></div> 而不是 <div style="transform: none;"></div> （示例中的代码有效），我一直在研究但找不到解决方案所以我来问这个很棒的社区的帮助。

目标：使用 react-spring 和 react-use-gesture.

在 React storybook 上有一个可拖动的卡片组件故事

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

实际结果：组件不可拖动

错误消息：none。

组件代码:

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 的最新测试版。我的版本是：

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

和解决方案

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

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

React-use-gesture 不适用于 Storybook

React-use-gesture not working with Storybook

reactjs

storybook

react-spring