React-use-gesture 不适用于 Storybook答案

【问题标题】：React-use-gesture not working with StorybookReact-use-gesture 不适用于 Storybook
【发布时间】：2020-03-12 21:15:22
【问题描述】：

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

目标：使用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 包含上面的代码 ^ 如果您只想检查代码。

【问题讨论】：

标签： reactjs storybook react-spring

【解决方案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"

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

【讨论】：